浮动导致父容器高度塌陷是设计行为而非bug；display: flow-root是最安全的修复方式，overflow:hidden易裁剪绝对定位元素，clearfix需满足content、display和作用位置三条件。
因为浮动元素脱离了普通文档流，父容器在布局计算时“看不见”它们，高度自然不会包含这些子项——这不是 bug，是 float 的原始设计行为。
float 脱离文档流导致 height 计算为 0
当子元素设置 float: left 或 float: right 后，它就从文档流中抽离，不再参与父容器的高度、宽度、margin 折叠等常规布局计算。即使子元素有明确的 height: 200px，父容器的 computed height 仍可能是 0px。
此时你看到的 border“断开”、background-color“消失”、后续元素上浮覆盖，全是因为父容器实际渲染区域高度为 0，样式无处可画。
- 用 DevTools 的 Computed 面板直接查父容器的
height值，如果是0px，基本就能锁定是浮动塌陷 - 临时加
border: 1px solid red到父容器，能一眼确认它是否真的缩成一条线 - 如果父容器内还有非浮动内容（比如一段文字），它会按那段文字撑高，但浮动部分依然被忽略
display: flow-root 是最安全的修复方式
display: flow-root 是 W3C 明确定义的 BFC（块级格式化上下文）触发方式，专为解决这类问题而生。它强制父容器创建新的 BFC，重新包含所有子元素（包括浮动项），高度自动撑开，且不带副作用。
- 写法极简：
.parent { display: flow-root; } - 不裁剪
position: absolute弹层、box-shadow、transform位移内容 - 不引入额外 DOM 节点或伪元素，语义清晰、维护成本低
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，2026 年已可放心使用
- 注意：
display: flow-root和position: absolute不能同时作用于同一元素，后者会让前者失效
overflow: hidden 为什么容易出问题
overflow: hidden 确实能快速触发 BFC、让父容器撑高，但它本质是“让溢出内容不可见”。这个副作用在开发阶段常被忽略，上线后才暴露。
- 一旦父容器内有下拉菜单、tooltip、弹窗等
position: absolute元素超出边界，就会被意外裁剪 -
overflow: auto更保守，但会多出滚动条，UI 上可能穿帮 - 若父容器本身是
display: inline或display: inline-block，overflow属性根本不生效 - 别误以为
overflow: visible（默认值）能起作用——它不触发 BFC，完全无效
clearfix 伪元素必须满足三个硬条件
如果项目需兼容 IE11 或对接无法修改的第三方 HTML，::after 清除仍是必要手段。但漏掉任意一个关键声明，它就彻底失效。
-
content: ""必须存在（空字符串也行），否则伪元素根本不渲染 -
display: table或display: block不能省——仅clear: both不起作用 - 必须加在浮动元素的**直接父容器**上，嵌套结构要逐层加
- 旧版 IE6/7 需补
*zoom: 1（仅当真要支持时才加） - 用 DevTools 查看时，默认不显示
::after，需勾选 “Show user agent shadow DOM” 才能看到
真正该警惕的，不是怎么清除浮动，而是还在用 float 做整体布局——现代项目中，display: flex 或 display: grid 下 float 会直接退化，高度塌陷问题根本不会出现。强行混用，反而让调试更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
