浮动元素脱离文档流是因为float使元素从常规布局中抽离并允许内容环绕，导致父容器高度塌陷；清除浮动本质是触发BFC以包含浮动后代。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“从常规布局中抽离”，向左或右靠拢，同时允许内联内容（如文字）环绕它。这导致父容器无法感知浮动子元素的高度，height 塌陷成 0 —— 这不是 bug，是 CSS2.1 规范明确定义的行为。
常见错误现象：div 父容器背景色/边框消失、后续兄弟块级元素上移、margin-top 失效。
- 仅当子元素全部浮动时，父容器才可能塌陷；混排普通块元素通常不会
-
float: left和float: right在同一父容器中会相互挤压，而非自动换行 - IE6/7 中双倍 margin bug（仅对浮动方向的 margin 生效）至今仍有遗留项目需兼容
clear: both 不是万能解，但最可控
在浮动元素后插入一个带 clear: both 的空标签（如 <div style="clear:both"></div>），是最直白的清除方式。它强制该元素不与任何浮动元素同行，从而撑开父容器。
性能影响极小，但 HTML 结构污染明显。现代项目中更推荐用伪元素替代：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：必须给父容器设置该 class，且 display: table 是关键——block 会导致新行但不触发 BFC，table 或 table-cell 才能可靠建立块级格式化上下文（BFC）。
- 不要用
clear: left或clear: right清除双向浮动，只清单侧会失效 -
::before伪元素加clear没有意义，它位于浮动元素之前，不参与清除逻辑 - 若父容器本身有
overflow: hidden，也能触发 BFC 并撑高，但会意外裁剪position: absolute子元素的溢出部分
flex / grid 替代 float 的真实迁移成本
用 display: flex 或 display: grid 实现横向排列，可彻底规避浮动塌陷问题。但这不是简单替换 class 就能完成的。
典型场景对比：
- 导航栏多列布局 → 改用
flex后，float相关的margin重置、text-align对齐逻辑全要重写 - 图文混排（文字环绕图片）→
float仍是唯一原生支持方案，shape-outside兼容性差，grid无法实现环绕 - 响应式卡片网格 →
float需配合媒体查询 + 宽度计算，grid用auto-fit+minmax()更简洁，但 IE11 不支持grid的部分语法
结论：新项目优先用 flex/grid，但老项目中为清除浮动而强行改布局，往往比维护 clearfix 更耗时且易出错。
contain: layout 能否替代 clearfix
contain: layout 是 CSS Containment 标准中的属性，它会让元素建立独立的布局上下文，类似 BFC，理论上可阻止子浮动影响外部，也能让父容器正确计算高度。
但它目前（Chrome 85+、Firefox 79+、Safari 15.4+）仍属实验性特性，且存在明显限制：
- 不触发
clear行为，即浮动子元素仍会“逃逸”到父容器外影响兄弟元素定位 - 一旦启用，父容器内的绝对定位子元素将相对于该容器定位，可能破坏原有弹窗、下拉菜单逻辑
- 部分浏览器中与
transform、will-change组合使用时，渲染异常概率上升
目前它更适合用于虚拟滚动、无限列表等强性能敏感场景的局部隔离，而不是作为通用 clearfix 替代方案。
真正容易被忽略的是：清除浮动的本质不是“修复 bug”，而是主动声明“我需要这个容器包含它的浮动后代”。无论用 clearfix、overflow 还是 display: flow-root，核心都是触发 BFC —— 记住这一点，比记十个技巧更管用。
