float 使子元素脱离文档流导致父容器高度塌陷，overflow: hidden 和 display: flow-root 可触发 BFC 解决但各有兼容性限制，伪元素 clearfix 仍适用于老旧环境。
float 会让子元素脱离文档流，父级根本“看不见”它们
这不是父级“没清浮动”，而是 float 的本质行为：一旦元素设了 float: left 或 float: right，它就从常规文档流中被抽离，不再参与父容器的高度计算。父级就像没加载这些子元素一样，自然高度塌陷为 0（或仅剩内边距/文字行高）。clear: both 本身不修复这个，它只控制“某个元素是否避开前面的浮动”，对父容器是否包含子项毫无影响。
overflow: hidden 是最常用解法，但副作用得提前知道
给父容器加 overflow: hidden 能触发 BFC（块级格式化上下文），让父级重新包含浮动子项，从而撑开高度。但它不是“清除浮动”，是“重建容器边界”。要注意：
- 所有超出父容器范围的
position: absolute子元素会被裁剪（比如下拉菜单、tooltip） - 在 IE6/7 中需配合
zoom: 1或height: 1%才能触发 hasLayout - 如果父容器本就设置了
overflow: auto或scroll，加hidden会直接禁掉滚动，得权衡
display: flow-root 是现代标准解，但兼容性有断层
display: flow-root 是专为解决这类问题设计的 CSS 属性，同样触发 BFC，但无裁剪副作用，语义清晰，也不影响子元素定位。但它在旧浏览器里完全不支持：
- Chrome 64+、Firefox 59+、Safari 15.4+ 支持
- IE 全系、Edge ≤18、iOS Safari ≤15.3 不识别，会退化为
display: block，高度继续塌陷 - 若项目还需支持 iOS 15.2 或更低版本，不能单独依赖它
伪元素 clearfix 仍有必要，尤其要兼顾老环境
当必须支持 IE6–8 或低版本安卓 WebView 时，::after 伪元素方案仍是稳妥选择。关键点在于：
- 必须用
content: ""（空字符串），不能省略；否则伪元素不渲染，clear 失效 -
display: block和clear: both缺一不可；inline或inline-block无法清除浮动 - IE6/7 需补
zoom: 1触发 hasLayout，写在选择器主体上，不是伪元素里 - 示例：
.clearfix { zoom: 1; }<br>.clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
真正容易被忽略的是：很多开发者把“父级没高度”当成样式 bug 去 debug，却没意识到这是 float 的规范行为——它本来就不该参与文档流。换布局方式（如 display: flex）比硬清浮动更治本，但前提是确认项目不需要支持已淘汰的 IE 或极老移动内核。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
