浮动元素重叠实为父容器高度坍缩导致后续元素上移；清除浮动推荐伪元素法（.clearfix），Flex布局适用于垂直居中、等分自适应、响应式换行及顺序控制，但需注意兼容性与遗留样式冲突。
浮动元素为什么会重叠
浮动元素脱离文档流，父容器无法感知其高度，导致后续元素向上“塌陷”——这不是视觉重叠，而是父容器高度坍缩后，下面的块级元素直接顶上来，看起来像重叠了。常见现象是：footer 跑到内容中间、背景色没包住子元素、边框消失。
清除浮动的三种可靠方式
不是所有 clear: both 都管用，关键看加在哪、怎么加：
- 在浮动元素末尾加空标签：
—— 简单但污染 HTML，不推荐 - 给父容器触发 BFC（块级格式化上下文）：
overflow: hidden或overflow: auto—— 有效，但可能意外裁剪溢出内容或触发滚动条 - 使用伪元素清除（推荐）：给父容器加 CSS 类
.clearfix，定义为：.clearfix::after { content: ""; display: table; clear: both; }—— 语义干净、兼容性好（IE8+），且不影响布局逻辑
什么时候该直接换用 Flex 布局
Flex 不是“替代浮动”，而是解决不同问题：浮动本意是文字环绕图片，后来被 hack 成布局工具；Flex 才是专为一维布局设计的现代方案。以下情况建议放弃浮动，改用 Flex：
- 需要垂直居中（
align-items: center一行搞定，不用margin-top或transform折腾） - 子项宽度要自适应且等分（
flex: 1比float + width更鲁棒） - 响应式换行需求明确（用
flex-wrap: wrap，比媒体查询 + 清除浮动更简洁） - 要控制子项顺序与 DOM 顺序分离（
order属性，浮动完全做不到）
注意：display: flex 会让子元素自动变成 Flex 项目，原有 float、vertical-align、clear 全部失效 —— 别混用。
立即学习“前端免费学习笔记（深入）”；
兼容性与实际落地提醒
IE10+ 支持 Flex，但 IE10–IE11 对 flex-wrap 和某些 flex 缩写支持不稳定；若需兼容 IE9 及以下，仍得用浮动 + ::after 清除。不过现在多数项目已可安全启用 Flex —— 关键不是“能不能用”，而是“要不要保留浮动遗产”。老项目里突然把某个 float: left 改成 flex，很可能因为父容器还设着 overflow: hidden 或其他浮动遗留样式，导致布局错乱。
