clear:both并非清除浮动，而是让非浮动块级元素避开前一个同父级浮动兄弟；仅对紧邻的同级块级兄弟生效，对自身、父容器、行内元素及Flex/Grid子项无效。
clear属性只对后续兄弟元素生效
它不是“给浮动元素自己加就能清掉”的开关。比如你写 .item { float: left; clear: both; }，这个 clear 完全无效——浮动元素已脱离文档流，clear 的计算逻辑不作用于自身。
真正起效的场景是：一个**非浮动的块级元素**紧跟在浮动元素后面，且它是浮动元素的**同级兄弟**。此时设置 clear: both 才会让它下移到所有浮动元素下方。
- 父容器上写
.parent { clear: both; }是语法错误，浏览器直接忽略 - 浮动子元素的
clear值，只可能影响它和前面的浮动兄弟（比如两个float: left元素之间加clear: both，第二个会被推到下一行） - inline 或 flex 子项上设
clear会被忽略，必须是display: block或table等块级盒
clear: left / right / both 的实际行为差异
clear: left 不是“把左边的浮动干掉”，而是“我这个元素的左边不能有浮动，否则我就往下挪，直到左边空了为止”。同理 clear: right 只管右边。
而 clear: both 是同时检查左右两侧，只要任一侧有浮动，就继续下移，直到两边都空。这是最稳妥的选择，尤其当布局中浮动方向不确定时。
立即学习“前端免费学习笔记（深入）”；
- 如果页面里只有
float: left元素，clear: left和clear: both效果一样 - 但若存在
float: right元素（比如右置侧边栏），只用clear: left可能导致该元素与右侧浮动并排，造成错位 -
clear: none是默认值，不用显式写；inherit在 IE8 及更早版本不支持
现代项目里别硬套 clear:both 清父容器高度
想让父容器包住浮动子项？clear: both 加在父容器上没用，加在最后一个浮动子元素之后的空 div 上又冗余。现在应该优先用 display: flow-root。
-
display: flow-root触发 BFC，无裁剪副作用，IE11 不支持是唯一限制 -
overflow: hidden虽然也能触发 BFC，但会静默裁掉position: absolute弹层、阴影、transform 位移内容 - Flex/Grid 布局中加
clearfix是无效劳动——子元素的float基本被忽略
clear 属性的底层机制容易被误解
它不是“重绘”或“重排”，而是通过在元素上外边距上方插入一段“清除空间”来实现效果。这个空间不改变原有 margin 值，但会强制元素位置下移。
CSS2.1 之后，这个清除空间是独立计算的，所以你看到的“换行”其实是布局引擎在渲染阶段插入的空白区域，不是 margin 拉下来的。
- 调试时若发现元素没如预期下移，先检查 computed styles 中
display是否为块级 - 不要依赖
clear解决父容器塌陷问题，那是 BFC 的职责范围 - 多个浮动元素连续排列时，
clear只对紧邻的前序浮动兄弟生效，不跨过非浮动元素
