clear: both仅对浮动元素后同父、紧邻、块级且在标准流中的兄弟元素有效；加在浮动元素自身或父容器上均无效，现代布局应优先使用flex/grid或display: flow-root。
clear: both 只对特定位置的特定元素起作用——加错地方，等于没写。
必须加在浮动元素之后、同级、块级、标准流中的那个元素上
它不是“修复父容器”的开关，而是让「当前这个元素」的上边界避开前面所有浮动兄弟。所以目标元素得同时满足：
- 是块级元素（
display: block、table、flow-root等，不能是inline或inline-block） - 和浮动元素在同一个父容器内，且 HTML 源码中紧接其后（中间不能插其他块级元素）
- 自身未脱离文档流（不能有
position: absolute、display: contents等）
比如侧边栏 float: left 后，主内容区要完整换行，就该给 <main></main> 加 clear: both；页脚被吸到右侧，就直接给 .footer 加，而不是给它的父容器。
加在浮动元素自己身上？浏览器直接忽略
float: left; clear: both 这种写法不会“清除自己”，因为浮动元素已脱离文档流，clear 的计算逻辑根本不处理它。开发者工具里查 computed styles，clear 项根本不会出现。你看到它“掉下来”，其实是 float 自身因空间不足触发的换行，不是 clear 在起作用。
立即学习“前端免费学习笔记（深入）”；
加在父容器上？语法合法但语义错误
.parent { clear: both; } 不会撑高父容器，也不会影响子项布局。父容器不是浮动元素的“兄弟”，而是“祖先”，clear 不作用于祖先节点。想解决塌陷，该用 display: flow-root 或 overflow: hidden 触发 BFC——这些才是设计用来包裹浮动子元素的机制。
伪元素清除法为什么能“看起来有效”？
因为 .clearfix::after 实际是在父容器内部插入了一个满足三条件的新块级兄弟元素：content: "" + display: table + clear: both。它不是“给父容器加 clear”，而是“在父容器里造一个能响应 clear 的元素”。漏掉 content、用错 display（比如写成 inline），或被更高权重的 clear: none !important 覆盖，都会静默失效。
真正容易被忽略的是：现代项目里，clear: both 的使用场景正在快速收窄。只要能改用 display: flex 或 display: grid，子元素天然参与高度计算，clear 就彻底没有出场机会——它从来就不是为结构化布局而生的工具。
