浮动元素导致父容器塌陷是因为其脱离普通文档流，父容器无法感知其高度；这是CSS2.1定义的正常行为，非bug。
浮动元素为什么会让父容器塌陷
因为 float 会让元素脱离普通文档流，父容器在计算高度时直接“看不见”它了。这不是 bug，是 CSS2.1 明确定义的行为：浮动元素不参与块级格式化上下文（BFC）的常规高度计算。
常见错误现象：div 包着几个 float: left 的子元素，但父 div 高度为 0，背景色/边框消失，后续内容往上顶。
- 只对设置了
float的元素生效（left/right），none不脱离 -
position: absolute也脱离文档流，但机制不同，别混用 - 父容器没触发 BFC 时，塌陷一定发生；哪怕子元素有
height或margin也没用
清除浮动的三种有效方式及适用场景
核心目标不是“删掉浮动”，而是让父容器重新感知子元素高度。选哪种取决于你控制哪一层、是否要兼容旧浏览器。
-
overflow: hidden（或auto）：最轻量，父容器加就行，但会隐藏溢出内容，慎用于弹窗、下拉菜单 -
::after伪元素 +clear: both：现代标准写法，不影响布局，推荐作为默认方案.container::after { content: ""; display: table; clear: both; } -
clear: both单独标签：比如<div style="clear:both"></div>，语义差、污染 HTML，仅用于无法改 CSS 的老项目
float 和 inline-block 在文档流中的关键区别
两者都能实现横向排列，但对文档流的影响完全不同——这是很多人误以为“换种写法就能解决塌陷”的根源。
立即学习“前端免费学习笔记（深入）”；
-
float：完全脱离文档流，父容器高度坍缩，兄弟元素会环绕它（除非clear） -
display: inline-block：仍在文档流中，父容器能正常撑开高度，但元素间有空白符间隙（换行/空格导致），需用font-size: 0或注释消除 - 响应式场景下，
float已基本被flex/grid替代，但阅读老代码时必须懂它怎么“消失”的
浮动脱离文档流后，哪些属性还起作用
脱离 ≠ 失效。很多样式照常渲染，只是“不占位”了。容易误判的地方恰恰在这里。
-
width、height、background、border全部生效，所以你能看见它 -
margin仍影响自身位置，但和相邻非浮动元素的外边距不会合并（因为不在同一文档流） -
vertical-align对浮动元素无效——它只对inline/inline-block生效 - 浮动元素的
margin-bottom不会撑开父容器，但它的padding-bottom会（因为 padding 属于盒模型内部）
真正复杂的是嵌套浮动和文本环绕逻辑，日常开发里只要记住：父容器塌陷不是因为子元素“没了”，而是它“隐身参与高度计算”了。
