直接加.clearfix类最有效，但必须确保.clearfix::after含content:"";display:table;clear:both，且加在直接包裹浮动子元素的父容器上；否则无效。
直接给父容器加 .clearfix 类能解决问题，但必须写对伪元素、加对位置，否则等于没写。
为什么 clear: both 单独写在父元素上没用
因为 clear 只控制「自身」不与浮动同行，它不参与高度计算。父容器塌陷的本质是子元素脱离文档流后，父容器根本“看不见”它们——不是清得不够，而是没东西可清。
-
clear: both写在父元素上：父元素自己没浮动，这个声明完全无效 -
clear: both写在浮动子元素上：只能让该子元素换行，无法修复父容器高度归零 - 真正起效的是在父容器末尾插入一个「参与文档流的块级占位」，再让它
clear: both
.clearfix::after 必须包含哪几个关键属性
缺一不可，少一个都可能在某些浏览器中失效：
-
content: ""：必须显式设置，否则伪元素不渲染 -
display: table：比display: block更稳妥，能可靠触发 BFC，且避免 IE6/7 的 margin 双倍问题 -
clear: both：核心动作，强制该伪元素避开所有浮动，从而撑开父高
现代兼容写法（IE8+）：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
什么时候必须加 .clearfix，什么时候可以不用
加的前提很明确：父容器内有 float: left 或 float: right 子元素，且你依赖它的视觉高度（比如背景色、边框、margin-bottom）。
- 必须加：
<nav></nav>里浮动排列菜单项但外层没背景；图文混排中图片左浮、文字环绕，但下方内容上移 - 可以不用：
display: flex或display: grid容器里加.clearfix完全无效；父容器已设overflow: hidden（但它会裁剪transform或下拉菜单） - 更优替代：
display: flow-root（Chrome 58+ / Firefox 57+ / Safari 15.4+），一行解决，无伪元素、无 hack
调试时最容易被忽略的三个点
很多问题不是写法错，而是卡在细节上：
- Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到伪元素是否渲染成功 - 父容器如果写了
height或min-height，会覆盖clearfix带来的高度计算，先检查这些显式值 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
.clearfix，外层加了不代表内层自动生效
真正麻烦的从来不是写不对，而是加错了层级、或者在 Flex 容器里徒劳地塞 ::after——那个伪元素根本不会参与布局。
