clear: both 的空 div 无法撑开父容器高度，因其无内容、未触发 BFC；overflow: hidden 可触发 BFC 但会裁剪溢出；伪元素 clearfix 更稳妥；Flex/Grid 布局下浮动失效，无需清浮动。
为什么 clear: both 不能撑开父容器高度
很多人试过在浮动元素后面加一个空 <div style="clear: both"></div>，发现父容器还是塌陷——因为这个 div 虽然清除了浮动，但它本身是空的、没有内容或高度，且未参与父容器的 BFC（块级格式化上下文）构建，所以父容器依然“看不见”内部浮动元素的高度。
用 overflow: hidden 触发 BFC 最快但有风险
给父容器设置 overflow: hidden（或 auto、scroll）能立即让容器包含浮动子元素，原理是它强制创建了新的 BFC，使浮动元素被纳入高度计算。但要注意：
-
overflow: hidden会裁剪溢出内容（比如下拉菜单、阴影、绝对定位超出部分） -
overflow: auto在某些浏览器可能意外出现滚动条（哪怕内容没溢出） - 移动端 Safari 对
overflow: scroll的 touch 行为有时不一致
::after 伪元素 + clearfix 更稳妥
现代推荐做法是用伪元素模拟清除浮动的“占位”，既不污染 HTML，又无溢出裁剪问题。标准 clearfix 写法如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
display: table（或block）确保伪元素参与文档流并撑高容器 - 不能只写
clear: both，否则伪元素默认是inline，clear不生效 - IE8+ 兼容没问题；若需支持 IE7，可加
*zoom: 1触发 hasLayout
Flex 或 Grid 布局下根本不用清浮动
如果父容器已设为 display: flex 或 display: grid，子元素即使设了 float 也**不会脱离文档流**，更不会导致父容器塌陷——此时浮动实际失效，高度自然正常。但这也意味着：你本就不该在 Flex/Grid 容器里用 float 做布局，那是反模式。
真正需要清浮动的场景，基本只存在于传统文档流布局中；一旦用了现代布局，就该把 float 当作纯装饰手段（比如文字环绕），而非结构控制工具。
