浮动导致父容器高度塌陷为0，使后续元素从顶部堆叠；clearfix伪元素清除需content:""、display:table、clear:both三者齐全且作用于直接父容器。
为什么两列浮动后下一行内容会重叠
不是下一行“压”在浮动列上，而是浮动列的父容器高度塌陷为 0，导致下一行元素直接从父容器顶部开始渲染——它没被“推下来”，是父容器根本没存在感。浏览器计算父高时完全忽略 float: left 和 float: right 的子元素，所以后续 section、footer 或 p 就贴着页面顶部往上堆。
用 ::after 伪类清除浮动的正确写法
核心就三行 CSS，但漏掉任一细节都会失效：
-
content: ""必须写，缺了整个伪元素不生成 -
display: table比display: block更稳妥，尤其在 IE8–10 中能避免 margin 折叠异常 -
clear: both必须作用于伪元素本身，不能只写在父容器上
完整代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时，只给两列浮动元素的**直接父容器**加 class="clearfix"，不要加在浮动子元素上，也不要加在更外层的祖先上。
立即学习“前端免费学习笔记（深入）”；
常见错误：伪类写了但没生效
以下情况会让 ::after 清除完全失效：
- 父容器设置了
overflow: hidden或overflow: auto—— 这两个属性会触发 BFC，反而让::after的clear失去作用对象 - 父容器本身是
display: inline或display: inline-block—— 伪元素需要块级上下文才能正常参与清除 - 浮动子元素里嵌套了另一个浮动结构，但外层父容器只清了一次 —— 清除只作用于当前层级，子浮动仍需各自父容器处理
- 用了
display: flex或display: grid的父容器里还保留float—— 此时float已被规范定义为“无效”，::after清除无意义
现代项目里要不要继续用 clearfix
如果目标浏览器支持 display: flow-root（Chrome 64+/Firefox 58+），直接用它替代 clearfix 更干净：
.container {
display: flow-root;
}
它和 clearfix 效果一致，但无需伪元素、无兼容性 hack、语义明确。不过 IE11 及更早版本不支持，老项目迁移前得确认兼容范围。真正容易被忽略的是：一旦改用 flex 或 grid 布局，就该彻底删掉所有 float 声明——混用 float 和 flex 会导致 Chrome 与 Safari 渲染结果不一致，这不是清除能救的。
