浮动元素导致父容器高度塌陷是因为其脱离普通文档流，使父容器无法感知其高度；这是CSS规范行为而非bug，常见于文字环绕图片场景，而非布局用途。
浮动元素为什么会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时直接“看不见”它们。这不是 bug，是 CSS 规范定义的行为——float 的本意就是让文字环绕图片这类场景，不是用来做布局的。
常见错误现象：div 包着几个 float: left 的子项，但父 div 在 DevTools 里显示高度为 0，背景色/边框都看不到；后续兄弟元素直接往上顶，布局错乱。
- 别用
height硬撑，响应式下会失效 - 别依赖
overflow: hidden以外的overflow值（比如scroll或auto），某些旧版 Safari 下可能不触发 BFC - 如果父容器本身需要滚动，
overflow: hidden会意外裁剪内容，得换方案
clear: both 不是万能解，但最可控
clear: both 是语义最明确的清除方式，它强制元素避开左右所有浮动，常用于在浮动块末尾插入一个“清道夫”元素。
使用场景：需要精确控制清除位置、兼容性要求覆盖 IE8+、或已有结构不便改父容器样式时。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法是加空标签：
<div style="clear: both"></div>，简单直接，无副作用 - 避免给浮动子元素自己加
clear，这解决的是“下一个浮动元素不下行”，不是“父容器塌陷” - 不要用
clear: left或clear: right来试图“清除父容器”，它们只对同级后续元素生效
伪元素 ::after 清除是现代首选，但要注意 display 类型
用 ::after 生成内容并清除，本质是把“清道夫”变成父容器的内部一部分，不用额外 DOM 节点。
关键点在于生成的内容必须是块级且可参与 BFC 构建，否则清除无效。
- 必须设
content: ""，否则伪元素不渲染 - 必须设
display: table或display: block；display: inline无效（inline 元素不参与清除） - IE8 支持
:after但不支持::after，如需兼容要写双冒号和单冒号两个版本 - 示例：
.clearfix::after { content: ""; display: table; clear: both; }
flex/grid 布局下根本不需要清除浮动
一旦父容器设了 display: flex 或 display: grid，子元素即使写了 float，浮动行为也会被忽略——规范明确指出：浮动对 flex item 和 grid item 无效果。
这意味着：如果你还在用浮动做两栏/三栏布局，而父容器已经是 flex，那 clear 和 ::after 都是多余操作，还可能干扰 flex 自身的对齐逻辑。
- 检查 DevTools 中父容器 computed
display值，确认没被其他规则覆盖回block - 浮动元素在 flex 容器里会退化成普通块级元素，不再影响文字环绕，也不再需要清除
- 性能上，flex/grid 本身比浮动 + 清除更轻量，浏览器无需多次重排浮动上下文
::after 却没效果，最后发现是忘了 display: block，或者父容器被 JS 动态改了 display 值。 
