现代浏览器对float处理一致，问题源于未触发BFC或清除方式错误；clear仅对普通流中紧邻块级兄弟元素有效；推荐clearfix伪元素方案（display:table+clear:both），overflow:hidden仅为副作用，Flex/Grid下float自动失效。
不同浏览器对 float 的渲染差异，本质不是“浏览器不一致”，而是你没触发 BFC 或没正确清除浮动——现代浏览器（包括 IE8+）在标准模式下对 float 和 clear 的处理是一致的，出问题基本是因为文档模式、父容器塌陷、或清除方式本身有缺陷。
为什么 clear: both 有时不生效
常见错误是把 clear: both 加在浮动元素自身上，或者加在父容器内部一个空 <div> 上但没给它 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 来包裹浮动子元素，但副作用明显：
- 超出容器的内容会被裁剪（比如下拉菜单、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 是否生效，比换写法更重要。
