浮动元素脱离文档流是因为float使元素从常规布局中抽离并允许内容环绕，导致父容器高度塌陷；清除浮动本质是触发BFC以包含浮动后代。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“从常规布局中抽离”，向左或右靠拢，同时允许内联内容（如文字）环绕它。这导致父容器无法感知浮动子元素的高度，height 塌陷成 0 —— 这不是 bug，是 CSS2.1 规范明确定义的行为。
常见错误现象：div 父容器背景色/边框消失、后续兄弟块级元素上移、margin-top 失效。
- 仅当子元素全部浮动时，父容器才可能塌陷；混排普通块元素通常不会
-
float: left和float: right在同一父容器中会相互挤压，而非自动换行 - IE6/7 中双倍 margin bug（仅对浮动方向的 margin 生效）至今仍有遗留项目需兼容
clear: both 不是万能解，但最可控
在浮动元素后插入一个带 clear: both 的空标签（如 ），是最直白的清除方式。它强制该元素不与任何浮动元素同行，从而撑开父容器。
性能影响极小，但 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 就能完成的。
NITC效益型企业网站系统(PHP)产品特色1、企业网站模块：1）网站设计精美：前台页面全部采用DIV+CSS，设计严谨，布局合理，页面精美大气。2）管理操作方便：后台管理界面友好，简单易用，区别于一般CMS系统的复杂与繁琐，功能强大，系统安全，性能稳定。用户使用全自动化控制，功能模块可扩展性强。2、搜索引擎优化： 经众多网络营销专家制定，系统自带搜索引擎基础优化功能，能在最短的时间内提升网站的曝
典型场景对比：
- 导航栏多列布局 → 改用
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 —— 记住这一点，比记十个技巧更管用。
