浮动不撑开父容器是规范行为而非bug，清除浮动本质是补救误用；clear: both须加在浮动元素后的兄弟块级元素上；现代布局应改用flex或grid。
浮动元素不会撑开父容器高度，这不是 bug，是 CSS 规范行为——float 本就为文字环绕而生，不是布局工具。所有“清除浮动”的方案，本质都是在补救一个不该被用于布局的特性。
为什么 clear: both 必须加在浮动元素之后的兄弟元素上
clear 不作用于浮动本身，它只控制**当前元素的外边距**：让该元素的上边距避开前面的浮动元素。所以把它写在浮动子元素自己身上（比如 .item { float: left; clear: both; }），完全无效——它既不改变父容器计算方式，也不让父容器“感知”子元素高度。
- 必须放在最后一个浮动子元素的**后面**，且是同级兄弟节点（如
<div class="clearfix"></div>） - 该元素需是块级（
display: block或table），否则clear不生效 - 为避免额外高度，建议显式设
height: 0; font-size: 0; overflow: hidden; - IE6 下若仍有塌陷，需配合
zoom: 1触发 hasLayout
::after 伪元素法（.clearfix）怎么写才真正生效
常见错误是只写 content: "" 却漏掉 display，导致伪元素不参与布局，clear 形同虚设。
- 标准写法必须包含：
display: table（比block更稳，天然触发 BFC 且不继承line-height） -
::after要和::before配合用，前者防顶部 margin 折叠，后者负责清除；但现代项目可只用::after，前提是父元素无margin-top问题 - 兼容 IE8+：用单冒号写法
:after，避免双冒号在旧引擎失效 - 完整推荐写法：
.clearfix::after { content: ""; display: table; clear: both; }（无需height、visibility等冗余声明）
overflow: hidden 看似简单，为什么实际项目里要慎用
它通过触发父容器 BFC 来包含浮动子元素，原理正确，但副作用明显。
- 会裁剪任何溢出内容（比如下拉菜单、tooltip、负
margin拉伸、position: absolute超出父边界的部分） - 配合
width使用时，在 IE6/7 中需加*zoom: 1，否则仍塌陷 - 若父容器本身有滚动需求（如卡片列表带横向滚动），
overflow: hidden会直接禁用滚动 - 现代替代方案更安全：
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+ 支持），它只创建新 BFC，不干扰溢出行为
为什么现代项目应该停用 float 做布局
清除浮动的所有技巧，都是在给过时范式打补丁。真正该做的，是换工具。
-
display: flex父容器自动撑高，多列排列、对齐、换行全由属性控制，无需清除 -
display: grid适合二维布局，grid-template-columns直接定义列，语义清晰、响应式友好 -
float仅保留在文字环绕场景（如<img>+ 段落），这时根本不需要清除——因为父容器本就不该被它撑开 - 团队中若还在用
float写导航栏、卡片网格、侧边栏，那.clearfix就不是解决方案，而是技术债的警报灯
最常被忽略的一点：清除浮动本身，就是个信号——你正在用错工具。别再纠结哪个 clearfix 写法更“完美”，先问一句：这里真的需要 float 吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
