浮动塌陷是父容器高度为0导致子元素“消失”的典型问题，根本原因是浮动元素脱离文档流；clearfix伪元素方案最稳妥，需content: ""、display: table、clear: both。
父容器高度为0，子元素浮动后“消失”了
这是浮动塌陷最典型的症状：父容器height计算为0，背景、边框、下边元素全往上跑，看起来像子元素没在它里面。根本原因是浮动元素脱离文档流，父容器无法感知其尺寸。
常见场景包括：用float: left做多栏布局、导航菜单项横向排列、图片环绕文字后紧跟段落错位。
- 别指望
overflow: hidden以外的overflow值（比如visible或auto在某些旧版 Safari 下不触发 BFC） -
display: inline-block父容器不会自动撑高，必须配合vertical-align: top和字体大小归零才勉强可控，但语义错乱 - 给父容器写死
height是掩耳盗铃，响应式一来就崩
clearfix 伪元素方案最稳妥
现代项目里，::after清除浮动仍是兼容性与可维护性兼顾的首选。它不依赖额外 DOM 节点，也不影响语义结构。
关键不是抄一段代码，而是理解为什么这么写：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须用
content: ""，空字符串也行，但不能省略——否则伪元素不生成 -
clear: both要加在伪元素上，不是父容器本身 -
display: table比block更安全：避免 IE6/7 下外边距双倍问题，且不触发 hasLayout 异常
.clearfix::after {
content: "";
display: table;
clear: both;
}
flex 或 grid 布局能绕过浮动，但别硬套
如果只是想让几个块并排，还坚持用float，等于主动给自己埋坑。直接换布局模型更干净。
但要注意迁移成本：
-
display: flex会让子元素默认 stretch 高度，若原浮动布局靠vertical-align对齐，得加align-items: flex-start - IE10+ 才支持 Flex，若需兼容 IE9，
float+clearfix仍是唯一解 - Grid 更适合二维布局，一维并排用 Flex 更轻量，别为清除浮动专门上 Grid
margin 折叠和浮动混用会放大塌陷
当浮动元素后面紧跟着一个普通块级元素（比如p），它的上外边距常常会“穿透”父容器，跑到父容器外面去。这不是塌陷本身，而是塌陷 + 外边距折叠共同导致的视觉错乱。
解决思路不是调margin，而是打断折叠条件：
- 给父容器设置
border-top（哪怕1px solid transparent） - 或者用
padding-top: 0.01px，比加边框更隐蔽 - 绝对定位的浮动子元素不会引发塌陷，但会彻底脱离文档流——除非你真需要它“飘”着
浮动这东西，现在看是历史包袱，但老项目里它还在呼吸。真正难的不是怎么清，而是判断该不该清——有时候，把float换成inline-block或干脆重构为 Flex，反而少掉三行 CSS 和两个小时排查时间。
