浮动元素导致父容器高度塌陷，因其脱离普通文档流，父容器无法感知其高度；推荐用伪元素 clearfix 方案清除浮动，现代布局应优先选用 Flex 或 Grid。
为什么浮动元素会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时直接“看不见”它。这不是 bug，是 CSS 规范里明确写的行为——float 的本意就是让文字绕排，不是用来布局的。
常见错误现象：div 里放了几个 float: left 的子元素，父容器在开发者工具里显示高度为 0，背景色、边框全没了；用 getBoundingClientRect() 拿到的 height 也是 0。
- 只对**触发 BFC 的条件之一**起作用（比如
overflow: hidden），但会意外裁剪position: absolute子元素或阴影 -
clear: both必须加在浮动元素**之后**的兄弟元素上，加在父容器上无效 - Flex 或 Grid 布局下根本不需要清除浮动——它们天然不依赖文档流高度计算
最稳妥的清除方式：伪元素 + clear
这是目前兼容性最好、副作用最小的方案，所有现代浏览器和 IE8+ 都支持。
核心逻辑：在父容器末尾插入一个看不见的块级元素，并让它强制清掉左右浮动。
立即学习“前端免费学习笔记（深入）”；
/* 推荐写法，避免污染类名 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须用
::after（双冒号），单冒号在 IE8 下有兼容问题 -
display: table比block更安全：它不会触发 margin 合并，也不会意外影响垂直对齐 - 不要用
height: 0; overflow: hidden这类 hack，容易遮住box-shadow或transform溢出内容
什么时候该换 Flex 而不是硬清浮动
如果你只是为了实现两栏/三栏、等高布局、居中排列，还死守 float + 清除，就是在给自己埋坑。
真实场景判断：
- 需要响应式列数切换（比如从 3 列变 1 列）→ 直接上
display: flex，用flex-wrap和flex-basis - 要让子元素自动等高（比如卡片列表每行高度一致）→
flex天然支持，float得靠 JS 算高度 - 父容器本身是导航条、工具栏这类 UI 组件 → 它大概率不该有浮动子项，应改用
inline-flex或grid
IE6/7 下的遗留问题怎么处理
如果真要兼容，别碰 ::after，它在 IE6/7 根本不生效。得用老式 hack：
.clearfix {
*zoom: 1; /* 触发 IE6/7 hasLayout */
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
-
*zoom: 1是 IE6/7 专属 hack，现代浏览器忽略；不能写成zoom: 1，否则 Chrome 会触发缩放行为 - 必须同时写
:before和:after（单冒号），否则 IE7 下display: table不生效 - 这种写法现在几乎只出现在遗留后台系统里，新项目建议直接放弃支持
浮动撑开父容器这件事，本质是旧时代布局模型的补丁。真正容易被忽略的，是没想清楚：你到底需不需要浮动？还是只是习惯性写了 float: left，却忘了它早就不该是布局主力了。
