display: flow-root是最优解，一行代码触发BFC使父容器重新包含浮动子项，无裁剪副作用且现代浏览器全支持；overflow:hidden有裁剪风险，clearfix需content、display、clear三要素齐全。
父容器高度塌陷是根本问题，不是子元素“不够高”
浮动元素脱离文档流，父容器压根不计算它的高度——你看到的“不等高”，其实是父容器高度为 0 或仅由非浮动内容撑开，导致背景、边框、后续元素全部错位。这不是子元素没拉伸，而是父容器“看不见”它们。解决方向不是让子元素 height: 100%，而是让父容器重新包含所有浮动子项。
display: flow-root 是最干净的解法
现代项目直接给父容器加：display: flow-root。它专为触发 BFC 而生，一行生效，不裁剪溢出内容（box-shadow、下拉菜单、position: absolute 子项全保留），也不改变子元素原有排布逻辑。
- Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+ 均原生支持，2026 年已无兼容性顾虑
- 不要写
display: block或display: inline-block—— 它们不触发 BFC，无效 - 如果父容器同时用了
flex或grid，float会自动失效，此时加flow-root反而多余
overflow: hidden 或 auto 仍可用，但得小心副作用
overflow: hidden 能触发 BFC，确实有效，但它是“裁剪式”方案：
- 如果父容器内有
position: absolute弹层、长表格横向滚动、或box-shadow需要外溢，hidden会直接切掉 - 这时改用
overflow: auto更稳妥：BFC 触发成功，且只在必要时出现滚动条 -
overflow: visible不触发 BFC，写了也白写
伪元素 clearfix 适合需要兼容旧浏览器的场景
当必须支持 IE11 或对接无法改 HTML 的 CMS 输出时，用标准 .clearfix::after：
立即学习“前端免费学习笔记（深入）”；
- 三要素缺一不可：
content: ""（漏掉就渲染不出）、display: table（比block更稳，避免 IE margin 双倍）、clear: both - 父容器必须是块级（
display: block或默认值），否则伪元素不参与布局 - 别给父容器同时设
overflow: hidden和clearfix——两者冲突，清除可能失效
真正容易被忽略的是：如果你还在用 float 做整体布局，那“怎么等高”只是表象；根源在于 flex 或 grid 已能天然解决所有这类问题，且语义更清晰、维护成本更低。
