浮动元素重叠源于父容器高度塌陷，因浮动元素脱离文档流致父容器无法计算高度；可用clear清除法补救或flexbox绕过该问题。
浮动元素重叠是因为父容器高度塌陷
当子元素使用 float: left 或 float: right 后，它们会脱离文档流，导致父容器无法感知其高度，表现为“高度为0”——后续元素就会向上顶进，视觉上出现重叠。这不是浮动本身出错，而是布局机制的自然结果。
- 常见错误现象：
div里放了几个float: left的卡片，下面的页脚直接叠在卡片区域里 - 检查方法：给父容器加
border: 1px solid red，会发现边框几乎看不见或只有一条线 - 根本原因：浮动元素不参与父容器的高度计算，
clear和flexbox解决的是不同层面的问题——前者是“补救塌陷”，后者是“绕过塌陷”
用 clear 属性清除浮动（兼容老项目）
clear 不是给浮动元素自己加的，而是加在**需要避开浮动区域的后续兄弟元素**上。它让该元素的外边框边缘不与前面浮动元素的同侧边缘对齐。
- 典型写法：
放在所有浮动子元素之后，再给它设clear: both - 更常用的是伪元素清除法（避免额外标签）：
.container::after { content: ""; display: table; clear: both; } - 注意：
clear: left只避开左侧浮动，clear: right只避开右侧；clear: both是最常用选择 - 局限：仍依赖文档流顺序，响应式切换时容易失效；IE8+ 支持良好，但现代项目中已非首选
用 display: flex 替代浮动布局（推荐方案）
Flexbox 让容器主动管理子项排列，完全规避“脱离文档流”问题。浮动本就不是为整体布局设计的，只是早期 CSS 缺乏弹性布局能力时的权宜之计。
- 关键改动：给父容器设
display: flex，移除所有子元素的float - 横向排列默认就是
flex-direction: row，等价于以前多个float: left - 控制间距用
gap（比margin更干净），对齐用justify-content和align-items - 兼容性：Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+，基本覆盖所有现代环境；如需支持 IE10–11，可用
display: -ms-flexbox前缀（但不推荐为旧版妥协架构）
哪些情况别硬套 clear 或 flex？
不是所有“看起来重叠”的问题都该用这两个方案。先确认是否真由浮动引起：
立即学习“前端免费学习笔记（深入）”；
- 如果重叠出现在
position: absolute或transform元素上，和浮动无关，要查层叠上下文（z-index）或定位偏移 - 文字环绕图片用
float仍是合理场景，此时不需要清除，也不该强上 flex - Grid 布局已成新标准，复杂二维布局（如仪表盘、相册网格）优先用
display: grid，而非强行塞进 flex - 移动端适配时，
flex-wrap: wrap配合min-width比靠clear断行更可控
浮动没被废弃，但它不再是布局主力。真正容易被忽略的是：很多所谓“清除浮动”的代码，其实掩盖了结构不合理——比如把导航、主内容、侧边栏全塞进一个浮动容器，不如按语义拆成独立 flex 容器。
