float脱离文档流是CSS规范行为，不是bug；设置后元素不再参与父容器高度计算，导致高度塌陷，需用clearfix或BFC触发等方案修复，现代布局应优先使用flex或grid。

float脱离文档流是CSS规范行为，不是bug

设置 float: left 或 float: right 后，元素会从普通文档流中“抽离”，即不再参与父容器的高度计算——这是CSS 2.1规范明确规定的，不是浏览器实现缺陷。父容器在布局阶段直接忽略这些浮动子项的尺寸，导致其 height 计算结果为 0（若内部无其他非浮动内容）。常见表现是：父容器背景/边框突然消失、后续标准流元素上移覆盖浮动内容、内边距失效。

父级高度塌陷的本质是“无内容可撑”

父容器高度默认由其**参与文档流的子内容**撑开。一旦所有子元素都浮动，且没有文本节点、 、或未浮动的块级元素，父容器就失去高度依据。注意以下几点：

• clear: both 加在空
  上本身不产生高度——它只控制定位，若该元素 height: 0 且无 padding/border，仍无法撑开父级
• 给父元素设 overflow: hidden 能“修复”高度，是因为它强制触发 BFC，使父容器重新包含浮动子项；但副作用是可能意外裁剪溢出内容或触发滚动条
• 浮动元素的宽高总和不影响父容器宽度计算，但若超出父容器 width，会导致换行或视觉错位，加剧布局不可控

推荐用 clearfix 伪元素而非 overflow:hidden

现代项目中，优先使用 ::after 伪元素实现清除，语义清晰、无副作用。关键点在于让伪元素成为文档流中一个**有渲染尺寸的块级元素**：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

这个写法兼容 IE8+，且比 display: table 更稳妥——因为某些旧版浏览器对 table 的渲染可能引入额外行高。务必给父容器添加 class="clearfix"，否则伪元素不生效。

真正该问的是：你还需要 float 吗？

如果只是为了多列布局或对齐，display: flex 或 display: grid 是更现代、更可靠的选择。它们天然不脱离文档流，父容器高度自动包含子项，不存在塌陷问题。只有当需要文字环绕（如图文混排）或兼容极老环境时，才需保留 float 并配套处理清除逻辑。很多“清除浮动”的调试时间，其实本可以省下来改用 Flex。