float脱离文档流是CSS规范行为，不是bug；设置后元素不再参与父容器高度计算，导致高度塌陷，需用clearfix或BFC触发等方案修复，现代布局应优先使用flex或grid。
float脱离文档流是CSS规范行为，不是bug
设置 float: left 或 float: right 后，元素会从普通文档流中“抽离”，即不再参与父容器的高度计算——这是CSS 2.1规范明确规定的，不是浏览器实现缺陷。父容器在布局阶段直接忽略这些浮动子项的尺寸，导致其 height 计算结果为 0（若内部无其他非浮动内容）。常见表现是：父容器背景/边框突然消失、后续标准流元素上移覆盖浮动内容、内边距失效。
父级高度塌陷的本质是“无内容可撑”
父容器高度默认由其**参与文档流的子内容**撑开。一旦所有子元素都浮动，且没有文本节点、 、或未浮动的块级元素，父容器就失去高度依据。注意以下几点：
-
clear: both加在空<div> 上本身不产生高度——它只控制定位，若该元素 <code>height: 0且无padding/border，仍无法撑开父级 - 给父元素设
overflow: hidden能“修复”高度，是因为它强制触发 BFC，使父容器重新包含浮动子项；但副作用是可能意外裁剪溢出内容或触发滚动条 - 浮动元素的宽高总和不影响父容器宽度计算，但若超出父容器
width，会导致换行或视觉错位，加剧布局不可控
推荐用 clearfix 伪元素而非 overflow:hidden
现代项目中，优先使用 ::after 伪元素实现清除，语义清晰、无副作用。关键点在于让伪元素成为文档流中一个**有渲染尺寸的块级元素**：
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
这个写法兼容 IE8+，且比 display: table 更稳妥——因为某些旧版浏览器对 table 的渲染可能引入额外行高。务必给父容器添加 class="clearfix"，否则伪元素不生效。
立即学习“前端免费学习笔记（深入）”；
真正该问的是：你还需要 float 吗？
如果只是为了多列布局或对齐，display: flex 或 display: grid 是更现代、更可靠的选择。它们天然不脱离文档流，父容器高度自动包含子项，不存在塌陷问题。只有当需要文字环绕（如图文混排）或兼容极老环境时，才需保留 float 并配套处理清除逻辑。很多“清除浮动”的调试时间，其实本可以省下来改用 Flex。
