清除浮动的五种方式是：1.空div清除（加<div class="clear"></div>）；2.设置父元素overflow:hidden触发BFC；3.伪元素法（.clearfix::after{content:"";display:table;clear:both}）；4.display:flow-root生成BFC；5.父元素也设浮动。
直接用 .clearfix 类就能解决，但必须确保它被正确应用在浮动元素的**直接父容器**上，否则无效。
为什么 clear: both 单独写在子元素上不管用
因为 clear 只控制「自身」避开前面的浮动，不改变父容器是否计算子元素高度。常见错误是给最后一个浮动子元素加 clear: both，但父容器仍塌陷——它根本没“感知”到浮动子元素的存在。
- 必须让父容器自己形成 BFC（块格式化上下文），才能包含浮动子元素的高度
-
clear: both是“避让”动作，不是“收口”动作；真正要的是“闭合浮动” - 如果父容器本身是
display: flex或display: grid，.clearfix完全不需要——这些值天然触发 BFC
.clearfix 的标准写法（兼容 IE8+）
核心是两件事：伪元素生成清除节点 + 触发父容器 BFC。缺一不可。
-
.clearfix::after必须设为display: table（不能用block，否则 IE8 不识别） -
content: ""不能省，否则伪元素不渲染 -
*zoom: 1是 IE7/8 的 hasLayout 触发器，漏掉会导致伪元素失效
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
什么时候加了 .clearfix 还是塌陷
典型场景不是代码写错，而是结构或样式干扰了 BFC 生效。
立即学习“前端免费学习笔记（深入）”；
- 父容器同时设置了
overflow: hidden和.clearfix：后者冗余，前者可能裁剪内容 - 父容器用了
position: absolute或fixed：它已脱离文档流，高度计算逻辑完全不同 - 浮动子元素里又嵌套了浮动元素，但外层父容器没加
.clearfix：只清最外一层，内层仍塌陷 - CSS 预处理器（如 Sass）里写了
@extend .clearfix却没输出实际类名：编译后类丢失，白加
现代项目要不要还用 .clearfix
取决于你是否还在用 float 做布局。如果用 flex 或 grid，.clearfix 就是历史包袱。
- Flex 容器中，
float属性基本被忽略（Firefox 除外），.clearfix加了也无效果 - 混用 float 和 flex 很危险：比如父容器
display: flex，子元素却设float: left，结果在 Chrome 中失效，在 Firefox 中部分生效——行为不可控 - 老项目迁移时，别全局替换，先 grep 出所有
float:，逐个判断是否真需清除
真正容易被忽略的点是：清除浮动从来不是为了“让子元素不浮动”，而是为了让父容器“承认子元素还在这儿”。所以检查点永远是父容器的渲染表现，而不是子元素有没有飘走。
