clear: both 的作用是让当前块级元素上边界避开前面所有浮动兄弟，而非阻止环绕或修复父容器塌陷；常见失效原因包括前面无浮动兄弟、被非浮动块隔断、元素为内联显示或父容器BFC干扰。
clear: both 的作用不是“阻止环绕”，而是让当前块级元素的上边界避开前面所有浮动兄弟——它解决的是“文字/块卡在浮动右侧不换行”的问题，不是修复父容器塌陷，也不影响浮动本身。
为什么加了 clear: both 还是没掉下来？
最常见原因是：目标元素前面根本**没有浮动兄弟元素**，或者中间被一个非浮动块隔开了。
-
clear只对「紧邻的前一个或多个浮动兄弟」生效，不会跨元素回溯；比如<div float:left></div>→<div>普通块</div>→<p style="clear:both"></p>，中间那个普通块就切断了关联，clear失效 - 目标元素自身是
display: inline或inline-block，clear对内联元素完全无效 - 父容器用了
overflow: hidden却没设高度，或触发了 BFC 但布局流被其他样式干扰（如position: absolute）
clear: both 和 clear: left 到底怎么选？
区别不在“力度”，而在触发条件和留白程度：
- 页面只有左浮动广告栏？用
clear: left就够了，clear: both会多等一段“右侧安全区”，造成不必要空白 -
clear: both要求左右都空才开始渲染，哪怕只有一侧浮动，它也会强制换行并留出双侧余量 - 两者都只对块级元素生效；
<span>、<em>加了也没反应
现代更干净的替代方案：display: flow-root
如果你只是想让父容器自动包裹内部浮动子项，并让后续内容老老实实从下方开始，不用每个 <p> 都加 clear，直接给父容器设 display: flow-root：
立即学习“前端免费学习笔记（深入）”；
article {
display: flow-root; /* 创建新 BFC，天然隔离浮动 */
}它兼容性良好（Chrome 64+/Firefox 59+/Safari 15.4+），且不受 DOM 动态变化影响。比伪元素 ::after { content: ""; display: table; clear: both; } 更轻量，也比 overflow: hidden 更安全（不意外裁剪阴影或溢出内容）。
真正容易被忽略的一点：clear 是单向的、局部的、仅作用于兄弟关系的定位控制；它不改变浮动元素的存在，也不修复父容器高度——那些是 BFC 或布局模型该干的事。别指望靠它“一劳永逸”解决浮动带来的所有问题。
