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