父容器高度塌陷是CSS规范行为，因浮动元素脱离文档流；需每层父容器独立触发BFC（如display:flow-root）或改用Flex/Grid布局。
浮动元素嵌套时父容器高度塌陷的典型表现
当子元素使用 float: left 或 float: right，而父容器没有设置高度或触发 BFC 时，父容器会“看不见”浮动子元素，表现为高度为 0 —— 这不是 bug，是 CSS 规范定义的行为。常见于导航栏、图文混排、卡片网格等场景。
尤其在嵌套浮动中（比如 .container > .row > .col 都用了 float），塌陷会逐层传递，导致外层布局错乱、背景色/边框消失、后续兄弟元素上移。
- 检查浏览器开发者工具中父容器的 computed height，常为
0px - 父容器 border 或 background-color 看不见，但子元素仍正常显示
- 后续非浮动兄弟元素顶替了“塌陷后的位置”，视觉上像被吸上去
clear: both 不解决嵌套内部的清除需求
clear: both 只对**紧邻的前一个浮动兄弟元素**生效，它不能“穿透”嵌套层级去影响父容器的包裹行为。很多人在子元素末尾加一个 <div style="clear:both"></div>，但这只清除了该层的浮动流，对上层父容器是否塌陷毫无作用。
- 在
.row内部加clear: both的 div，只能防止.row内部后续元素绕行，不告诉.container“我有内容” - 多层嵌套时，每一层都需独立处理自身塌陷，不能靠最内层一个
clear解决全部 - 滥用
clear还可能引入无意义空标签、破坏语义、增加渲染重排开销
推荐用 overflow: hidden 或 display: flow-root 触发 BFC
让父容器生成块级格式化上下文（BFC）是最干净的方案：BFC 区域会包含内部浮动元素，自然撑开高度。二者区别在于兼容性与副作用：
立即学习“前端免费学习笔记（深入）”；
/* 推荐：现代写法，无副作用 */
.container {
display: flow-root;
}
<p>/<em> 兼容旧版（IE8+），但慎用 overflow:hidden </em>/
.row {
overflow: hidden; /<em> 如果子元素有 drop-down、tooltip、position: absolute 越界，会被裁剪 </em>/
}-
display: flow-root是专为此设计的值，语义清晰，无溢出裁剪风险，Chrome 58+/Firefox 54+/Safari 15.4+ 支持 -
overflow: hidden兼容性好，但若子元素含position: absolute且 left/top 超出父容器范围，会被隐藏 - 避免用
overflow: auto，它可能意外添加滚动条（即使内容没溢出）
Flex/Grid 替代 float 是更彻底的解法
浮动本就不是为复杂布局设计的。只要目标浏览器支持，直接用 display: flex 或 display: grid 可完全规避塌陷问题 —— 它们天然不脱离文档流，父容器自动包裹子项。
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 0 0 33.333%; /* 替代 float:left + width */
}- Flex/Grid 下无需任何清除手段，也不存在“父容器看不见子元素”的概念
- 响应式控制更直观（
flex-basis、grid-template-columns） - 注意 IE10/11 对 Flex 的部分属性支持不全（如
flex-wrap在 IE10 需加-ms-前缀）
真正容易被忽略的是：嵌套浮动中，每一级父容器都必须独立建立 BFC。不是加一次 clear 或设一次 overflow 就一劳永逸。现代项目优先用 display: flow-root 或直接迁移到 Flex/Grid，既省心又可持续。
