现代布局中无需清除浮动，BFC（如overflow:hidden）、Flex和Grid可自然包含浮动元素并避免父容器塌陷。
浮动元素不脱离文档流，但会破坏父容器高度计算——最直接的解法不是“清除浮动”，而是用更现代、更可控的方式绕过它。
为什么 clear: both 不再是首选方案
它只解决视觉错位，不修复父容器塌陷本质；需要额外 DOM 节点（如 <div style="clear:both"></div>）或伪元素 hack，维护成本高，且在 Flex/Grid 布局中完全冗余。
- 常见错误现象：
parent高度为 0，背景/边框消失，后续元素上移 - 使用场景：仅限遗留项目中必须兼容 IE8–9 的布局
- 性能影响：伪元素触发重排，
clear依赖兄弟元素顺序，逻辑耦合强
用 overflow: hidden 或 overflow: auto 快速收场
这是最轻量的“BFC 触发方案”：让父容器生成块级格式化上下文，自动包含内部浮动子元素。
- 适用条件：父容器无滚动需求，且不关心溢出内容被裁剪
- 注意点：
overflow: visible（默认值）不触发 BFC；overflow: hidden在 Safari 中可能意外截断position: fixed子元素 - 示例：
.container { overflow: hidden; } /* 父容器立刻获得正确高度 */
Flex 布局下根本不需要“清除浮动”
一旦父容器设为 display: flex，子元素无论是否设 float，浮动声明都会被忽略——CSS 规范明确要求 Flex 容器中 float 和 clear 无效。
立即学习“前端免费学习笔记（深入）”；
- 真实场景：导航栏、卡片列表、表单行布局
- 参数差异：
flex-direction控制主轴方向，align-items替代垂直对齐浮动的 hack - 兼容性：Chrome 29+ / Firefox 28+ / Safari 9+ / Edge 12+，IE10+ 需加
-ms-前缀
Grid 布局彻底告别浮动布局思维
浮动本就是为文字环绕设计的，不是为页面整体布局。Grid 提供二维控制，float 在 display: grid 容器中同样无效，且语义清晰、响应式天然支持。
- 容易踩的坑：仍试图用
float往 Grid 容器里“塞”元素，结果样式失效还查不出原因 - 替代方案：
grid-template-columns定义列宽，justify-self控制单个项目对齐，无需任何清除逻辑 - 示例：
.grid { display: grid; grid-template-columns: 1fr 2fr; }
真正需要“清除浮动”的时刻，往往说明你还在用 2008 年的布局思路处理 2024 年的需求。BFC、Flex、Grid 各有适用边界，但共同点是：不依赖 float 实现布局，自然就不用“清”。
