子元素浮动导致父元素高度塌陷不是bug，是CSS规范明确行为：浮动元素脱离文档流，父容器计算高度时忽略它们，仅基于文档流内内容；常见表现包括背景不显示、边框缩线、后续元素上移。
子元素浮动导致父元素高度塌陷，不是 bug，是 CSS 规范的明确行为：float: left 或 float: right 会让元素完全脱离普通文档流，父容器在计算自身高度时，只基于仍在文档流内的内容（比如文本、非浮动块），对浮动子元素“视而不见”。
浮动元素真的脱离了文档流
脱离文档流意味着：它不再参与父容器的高度计算、不触发 margin 塌陷合并、不影响兄弟元素的垂直位置（除非用 clear 干预）。哪怕它视觉上还在那儿，offsetHeight、DevTools 显示的父容器高度、背景色渲染，全都会归零或严重缩水。
常见表现包括：
- 父容器背景色不显示、边框缩成一条线
- 后续兄弟元素直接“贴”到浮动块下方，而不是被撑开后正常换行
- JavaScript 读取
parent.offsetHeight返回0或远小于预期值
为什么 clear: both 加在父元素上完全没用
clear 的作用对象永远是「它所在的那个元素自己」，不是它的父容器。给父元素写 .parent { clear: both; }，只会在它前面有浮动兄弟时强制换行——对内部浮动子项的高度计算毫无影响。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 就是模拟这个位置，但前提是它必须渲染出来：
-
content: ""缺失 → 伪元素不生成 → 清除失效 -
display没设成table或block→ 伪元素是行内级 →clear: both对它无效 - 父容器本身设了
overflow: hidden或auto→ 可能干扰伪元素的清除行为
display: flow-root 是现代解法，但别和 float 混用
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生。它语义清晰、无副作用：不裁剪 box-shadow、不截断 position: absolute 弹层、不意外触发滚动条。
但它有一个硬性前提：不能和 float 同时作用于同一个元素——float 会覆盖 flow-root 的布局行为，导致失效。
兼容性已足够好：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，2026 年绝大多数项目可直接使用。
真正容易被忽略的是布局模型选择
你花时间修的，可能根本不是该修的问题。如果整个区块依赖 float 实现结构（比如导航栏、卡片网格），那核心矛盾往往不是“怎么清浮动”，而是“是否该换 layout 方式”。display: flex 或 display: grid 天然不脱离文档流，父容器高度自动包含子项——此时加 .clearfix 不仅无效，还会干扰调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
