CSS清除浮动的几种有效方法

• 这是典型的“视觉清除 ≠ 行为清除”，浮动脱离文档流的本质没变
• 真正需要“清除后续流布局受干扰”，得用 clear:both 或伪元素 ::after 清除
• overflow:hidden 的副作用：隐藏溢出内容、禁用滚动（除非显式设 overflow:auto 或 scroll）

BFC 触发条件里，overflow:hidden 最常用但最危险

触发 BFC 是它修复父容器高度塌陷的根本原因，但 overflow:hidden 是所有触发方式中兼容性好却副作用最强的一个。

• IE6/7 不支持 BFC 概念，但意外地把 overflow:hidden 当作 layout 触发器，所以能“凑合用”
• 现代浏览器中，overflow:hidden 会剪裁 position: absolute 超出容器的部分（比如下拉菜单、tooltip），而 display: flow-root 不会
• 替代方案优先级建议：display: flow-root > overflow:auto > overflow:hidden（仅当确定无溢出内容时）

display: flow-root 是更干净的替代写法

它是专为解决这个问题设计的 CSS 属性，语义清晰、无副作用，2018 年起主流浏览器已稳定支持。

• 写法简单：display: flow-root 直接让容器成为 BFC 根，包裹内部浮动，撑开高度，不影响绝对定位子元素
• 兼容性注意点：IE 全系不支持；如需兼容 IE11，可用 @supports (display: flow-root) 进行渐进增强
• 和 overflow:hidden 对比：display: flow-root 不改变溢出行为（默认仍是 visible），也不影响滚动逻辑

伪元素清除法 still works，且更可控

如果你必须兼容老浏览器，或想明确表达“这里要清除浮动”，用 ::after 伪元素仍是首选。

• 标准写法：

   .clearfix::after { content: ""; display: table; clear: both; }

• 关键点：display: table（或 block）确保伪元素参与块格式化上下文，clear: both 才真正阻断浮动影响
• 容易踩的坑：漏写 content: ""（伪元素不渲染）、用 display: inline（clear 失效）、父容器设了 height 固定值（掩盖了塌陷问题，误以为清除成功）

理论要掌握，实操不能落！以上关于《CSS清除浮动的几种有效方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！