clear: both 失效是因为它只清除同级相邻浮动元素，无法影响父级浮动容器；真正有效的是让后续元素创建新BFC，如display: flow-root或overflow: hidden。
clear: both 为什么有时失效
因为 clear 只对紧邻的浮动元素生效，如果前面浮动的是一个已脱离文档流的父容器（比如 float + width + height 自封闭），后续区块即使写了 clear: both 也可能“看不见”那些浮动——它清的是兄弟级浮动，不是祖辈级浮动。
- 常见错误现象：
clear: both写了但内容依然被顶到右侧、换行错乱、高度塌陷重现 - 真正起作用的前提：目标元素和浮动元素必须处于同一块格式化上下文（BFC）层级，且是相邻的块级兄弟关系
- 单纯加大
clear的值（如clear: both !important）完全无效——clear是关键字枚举值，不接受数值
用 overflow: hidden 触发 BFC 是最稳的解法
让下一个区块自己形成独立 BFC，就能天然隔离前面所有浮动的影响，不用依赖 clear 去“对抗”。这不是 hack，是 CSS 规范定义的行为。
- 推荐写法：
overflow: hidden、overflow: auto或display: flow-root（现代浏览器首选） -
display: flow-root最干净：创建新 BFC 同时不改变盒模型行为（比如不会像overflow: hidden那样意外裁剪position: absolute子元素） - 兼容性注意：IE 不支持
flow-root，若需支持 IE11，用overflow: hidden更稳妥
为什么不要用 margin-top 模拟 clear 效果
有人试过给下一个区块加巨大 margin-top 把它“顶下来”，这看似有效，实则埋下三个雷：
- 浮动容器高度变化时（比如响应式折叠、JS 动态增删内容），这个固定
margin-top立刻失准 - 在缩放或不同 DPI 屏幕下，像素值错位更明显
- 如果后续要加动画、transition 或 transform，
margin会干扰布局计算，尤其和will-change冲突
实际项目中该选哪个方案
看场景定，没有银弹：
立即学习“前端免费学习笔记（深入）”；
- 只清紧邻的几个浮动子项 → 用
clear: both，但确保它是浮动元素的直接兄弟 - 要彻底隔绝前序所有浮动影响（包括嵌套浮动容器）→ 无条件上
display: flow-root - 需要兼容老浏览器且浮动结构简单 →
overflow: hidden+ 显式设置width: 100%（防意外收缩）
最容易被忽略的一点：BFC 边界必须严格落在浮动结束之后。如果浮动容器本身没闭合（比如没清除内部浮动），那它的 BFC 外延就不可控——先 fix 父容器的浮动闭合，再处理后续区块。
