现代浏览器对float处理一致，问题源于未触发BFC或清除方式错误；clear仅对普通流中紧邻块级兄弟元素有效；推荐clearfix伪元素方案（display:table+clear:both），overflow:hidden仅为副作用，Flex/Grid下float自动失效。
不同
浏览器
对
的渲染差异，本质不是“浏览器不一致”，而是你没触发 BFC 或没正确
清除浮动
——现代浏览器（包括 IE8+）在标准模式下对
和
的处理是一致的，出问题基本是因为文档模式、父容器塌陷、或清除方式本身有缺陷。
为什么
有时不生效
常见错误是把
加在浮动元素自身上，或者加在父容器内部一个空
floatfloatclearclear: bothclear: both
上但没给它 display 属性。更隐蔽的问题是：该元素不在浮动元素的**后续普通流中**（比如被
position: absolute
或
float
自身影响了文档流位置）。
clear
只对**紧邻的、处于普通流中的块级兄弟元素**有效
如果清除元素被
float
或
position: absolute
移出了普通流，
clear
失效
IE6/7 中，
clear
在某些 inline 元素后行为异常，必须确保清除元素是块级且无浮动
推荐的清除浮动写法（兼容 IE8+）
不要依赖空标签，优先用
伪元素
+ BFC 触发。这是最稳定、语义清晰、无需额外 HTML 的方案：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注意两点：
立即学习
“
前端免费学习笔记（深入）
”；
必须同时写
::before
和
::after
，否则 IE8 下可能撑不开高度（
::before
解决顶部 margin 折叠）
display: table
是关键，它让伪元素成为匿名表格单元格，自然参与 BFC 布局；不能用
display: block
替代，否则 IE8 不识别
clear
如果项目需支持 IE7，改用
zoom: 1
触发 hasLayout（仅 IE）：
.clearfix { *zoom: 1; }
什么时候该用
overflow: hidden
清除？
只在父容器**不需要溢出内容可见、且不关心滚动行为**时可用。它本质是通过触发 BFC 来包裹浮动子元素，但副作用明显：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
超出容器的内容会被裁剪（比如下拉菜单、tooltip、负 margin 拉伸）
移动端 Safari 中，
overflow: hidden
可能导致
position: fixed
元素定位异常
如果父容器本身需要滚动（如
overflow-y: auto
），就不能再用
hidden
清除
所以它不是“清除浮动的方法”，而是“偶然达成清除效果的副作用”——别当正解用。
Flex/Grid 布局下还用得着清除浮动吗？
完全不用。一旦父容器设了
display: flex
或
display: grid
，子元素的
float
属性**自动失效**（规范定义），浮动不再脱离文档流，也不存在塌陷问题。
如果你还在用
float
布局，说明还没真正迁移到现代布局——这不是兼容性问题，是技术选型滞后。清除浮动的“规范写法”只是补救措施，不是长期方案。
真正容易被忽略的是：很多所谓“清除失败”，其实是父容器用了
min-height
或
height
固定值，掩盖了塌陷；或者 CSS 文件加载顺序导致清除样式被覆盖。先检查 computed styles 里的
height
和
clear
是否生效，比换写法更重要。