浮动元素脱离文档流导致父容器高度塌陷，清除浮动本质是强制换行而非修复bug；推荐用display:flow-root触发BFC，兼容性不足时用伪元素clearfix。
浮动元素不主动撑开父容器，是因为它已脱离文档流——这不是 bug，是 float 的设计本意；清除浮动不是“修复错误”，而是告诉浏览器：“这里该换行了”。
float 为什么导致父容器高度塌陷
设置 float: left 或 float: right 后，元素会从普通文档流中抽离：它不再占据空间、父容器无法感知其尺寸、后续兄弟元素会“上浮”填补空缺。典型现象包括：border 消失、背景色不见、下方内容叠在浮动块上。
这不是父容器“坏了”，而是它按规范行事：没内容就没高度。浮动元素就像贴在纸上的便利贴——纸（父容器）不会为它变厚。
- 父容器的
height计算只基于文档流内元素，浮动元素被忽略 -
margin塌陷、vertical-align异常等连锁问题，往往都源于这个脱离行为 - 即使子元素有明确
height，父容器仍可能显示为0px
clear: both 不是万能解，但它是逻辑锚点
clear: both 的作用很具体：让当前元素的上边缘避开所有已浮动的元素，强制换行。它不“清除 float 属性”，也不影响浮动元素本身，只是给后续元素一个明确的起始位置。
立即学习“前端免费学习笔记（深入）”；
常见误用是把它加在浮动子元素上——这毫无意义；真正该加的地方，是浮动流的**末尾**，且必须是**非浮动元素**。
- 错误写法：
<div class="item" style="float:left; clear:both"></div>（每个 item 都清，等于没清） - 正确写法：在最后一个浮动元素后插入
<div style="clear:both"></div>或用伪元素模拟 -
clear: left和clear: right仅在混合浮动方向时有用，多数场景直接用clear: both
现代项目优先用 display: flow-root 而不是 clearfix
display: flow-root 是 CSS Level 3 正式引入的 BFC 触发方式，它让父容器创建独立格式化上下文，自然包含浮动子元素，且无副作用——不裁剪 position: absolute 子项，不意外触发滚动条，也不依赖伪元素。
相比传统 .clearfix::after，它更简洁、语义清晰、调试友好。但要注意兼容性：IE 完全不支持，Edge 16+、Chrome 64+、Firefox 59+ 才可用。
- 推荐写法：
.container { display: flow-root; } - 不要混用：
overflow: hidden虽能触发 BFC，但可能隐藏弹出层或遮罩 - 伪元素法仍需保留：当目标环境含 IE11 或旧版 Android WebView 时，
.clearfix::after仍是稳妥选择
哪些场景真得手动 clear，而不是换布局方案
不是所有浮动都要清除。当你在用 float 做图文环绕（比如新闻正文里图片左浮、文字绕排），或维护十年以上老系统（报表页、CMS 主题模板），clear 就是唯一可读、可控、可 debug 的手段。
这时候重点不是“要不要清除”，而是“在哪清、清什么方向”。例如导航栏中多个 float: left 的 <li>，结尾清 both 即可；但若右侧有个 float: right 的搜索框，就得用 clear: right 避免干扰主菜单流。
- 浮动用于装饰性排版（如图标+文字组合）时，
clear往往只需局部生效 - 响应式断点切换中，
float可能只在某宽度下启用，此时clear必须配合媒体查询 - JS 动态插入浮动元素后，记得同步插入清除节点或重设
flow-root，否则 layout 会错位
真正容易被忽略的，不是“怎么清”，而是“为什么这里必须清”——一旦你开始问这个问题，说明你已经看穿了 float 的物理本质：它不是布局工具，是文档流的临时借调协议。协议到期，就得还位置。
