浮动不撑父容器是规范行为而非bug，因float本为图文环绕设计；clear:both必须加在浮动元素后的块级兄弟元素上，作用是让该元素避开前方浮动，而非修复父容器塌陷。
浮动元素不撑开父容器高度，不是 bug，是 CSS 规范行为——float 本就为图文环绕设计，不是布局工具。所谓“清除浮动”，本质是补救误用，而非修复缺陷。
为什么 clear: both 必须加在浮动元素之后的兄弟元素上
clear 不作用于浮动本身，它只控制当前元素的外边距：让该元素的上边距避开前面所有浮动元素。写在浮动子元素自己身上（比如 .item { float: left; clear: both; }）完全无效；写在父容器上（.parent { clear: both; }）也无效，因为 clear 不影响子元素布局计算。
- 必须放在最后一个浮动子元素的**直接后续兄弟节点**上，且该节点需是块级（
display: block或table） - 常见错误：把
clear: both当作“清空父容器浮动状态”来用，结果毫无效果 - 若该兄弟元素有默认
margin或line-height，可能引入额外空白，建议显式设height: 0; font-size: 0;
::after 伪元素法失效的三个关键点
看似一行 .clearfix::after { content: ""; clear: both; } 就能解决，但漏掉任一条件就会失效。
- 必须写
content: ""—— 没内容，伪元素根本不会生成 - 必须设
display: table（或block），否则伪元素不参与布局，clear形同虚设；display: table更稳，天然触发 BFC 且不继承line-height - IE8+ 支持单冒号写法
:after，双冒号::after在旧引擎下可能被忽略
overflow: hidden 看似简单，但副作用比你想象的更隐蔽
它通过触发父容器 BFC 来包含浮动子元素，原理正确，但实际项目里常踩坑：
- 任何溢出内容都会被裁剪：下拉菜单、tooltip、
position: absolute超出父框的部分、transform位移后的区域 - 配合
width使用时，IE6/7 需加*zoom: 1，否则仍塌陷 - 若父容器本应支持横向滚动（如卡片列表），
overflow: hidden会直接禁用滚动
现代项目该用什么替代 float 布局
Flexbox 和 Grid 是语义清晰、无副作用的原生解，float 只应在图文环绕等特定场景保留。
- 单行多列：用
display: flex，父容器自动撑高，子项移除float后无需任何清除 - 二维网格结构：用
display: grid+grid-template-columns，响应式控制更直观 - 仅需包裹浮动子元素？优先选
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+），一行生效、零副作用，专为此类问题设计
真正容易被忽略的是：清除浮动不是终点，而是信号——它提醒你，当前布局方式已经过时。越早切换到 flex 或 grid，越少陷入 clearfix 套娃和兼容性补丁的循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
