浮动导致父容器高度塌陷，因浮动元素脱离文档流；用.clearfix::after加clear:both最稳妥，overflow:hidden有裁剪风险，flex/grid布局下无需clearfix。
为什么浮动盒子后面的内容会往上跑
因为浮动元素脱离了文档流，父容器无法感知它的高度，计算高度时直接当它不存在——结果就是父容器高度塌陷，看起来像“没包住”子元素。
常见现象：div 里放了几个 float: left 的 div，父容器背景色只显示一条细线，或者后面的 footer 跑到浮动块中间去了。
这不是浏览器 bug，是 CSS 浮动的原始设计行为。要让父容器“重新认出”浮动子元素的高度，得主动触发 BFC 或插入一个清除浮动的“锚点”。
用 ::after 伪元素加 clear 是最稳的方案
现代项目基本都用这个方法，兼容性好（IE8+），不污染 HTML 结构，也比加空 div 更干净。
实操要点：
- 给浮动元素的父容器定义一个类，比如
.clearfix - 用
::after在它末尾插入一个虚拟元素，并设clear: both - 必须设置
display: table或block，否则clear不生效 - 加上
content: ""，否则伪元素不会渲染
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 block 更稳妥，能避免某些 IE 下的边距合并问题；如果父容器本身是 inline 元素（比如 span），得先改成 inline-block 或 block 才能生效。
overflow: hidden 能不能替代 clearfix
能，但不推荐作为通用解法。
它通过触发 BFC 让父容器包含浮动子元素，写起来确实简单：
.container {
overflow: hidden;
}
但副作用明显：
- 内容超出容器时会被裁剪（比如下拉菜单、tooltip、负 margin 布局）
- 配合
transform或position: fixed子元素时，可能引发滚动异常或定位错乱 - 在 Safari 中对
will-change或合成层有干扰
所以只适合确定不会有溢出、且不需要复杂交互的简单场景。
Flex/Grid 布局下还用不用 clearfix
完全不用。一旦父容器设了 display: flex 或 display: grid，子元素自动参与布局计算，浮动本身就被降级为“仅影响行内布局”的行为，高度塌陷问题天然消失。
但要注意：
- 如果子元素仍写了
float，它在 Flex 容器里基本无效（除了影响文本环绕） - 不要为了“兼容老代码”而在 Flex 容器里硬加
.clearfix，多余且可能干扰对齐 - 迁移时优先删浮动，而不是补 clearfix
真正容易被忽略的是：有些框架（比如旧版 Bootstrap）的栅格类内部还在用浮动，如果你在外层套了 Flex，又没关掉框架的浮动逻辑，反而会造成意外交互——这时候得看具体类名是否带 float 或 clearfix，别无脑继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
