浮动元素重叠实为父容器高度塌陷，因float子元素脱离文档流致height计算为0，后续兄弟元素从顶部渲染而视觉压盖；根本解法是给直接父容器设display: flow-root创建bfc，现代浏览器支持良好且无副作用。
浮动元素重叠其实是父容器高度塌陷
这不是“元素真的叠在一起”，而是父容器 height 计算为 0px，导致后续兄弟元素直接从顶部开始渲染，视觉上压在了浮动元素上。打开开发者工具选中父容器，看“Computed”里的 height —— 如果是 0 或远小于预期，基本就确认是这个问题。
根本原因是：设置了 float: left 或 float: right 的子元素会脱离文档流，父容器完全感知不到它们的高度。
- 浮动元素仍占据空间（文本会环绕），但块级布局逻辑里它“不存在”
-
position: absolute、display: inline-block不会触发这种塌陷 - 背景色不显示、边框包不住内容、点击区域错位，都是同一根源的外在表现
clear: both 加在哪才有效
clear: both 必须作用于**浮动元素之后的块级兄弟元素**，而不是浮动元素自己。给 .float-item { clear: both; } 是无效的——它没东西可清。
典型场景：左侧导航栏 float: left，右侧主内容区被挤上去，这时应该给主内容区加 clear: both，让它强制换行到浮动区下方。
- 该元素必须是块级（
display: block或默认块级标签如div、p） - 如果中间夹着文本节点或
inline元素，clear可能失效，建议优先用 BFC 方案 -
clear: left/clear: right用于只避让单侧浮动，比both更精准
现代项目首选 display: flow-root
display: flow-root 是专为解决浮动塌陷设计的 CSS 值，它显式创建一个 BFC 容器，且不裁剪溢出内容、不触发滚动条、语义清晰。
只需在浮动元素的直接父容器上设置：
.container {
display: flow-root;
}
.container .item {
float: left;
}
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均支持
- 比
overflow: hidden安全：下拉菜单、tooltip、阴影不会被意外裁剪 - 比伪元素
::after简洁：无需额外 class、无 content 渲染风险 - 不兼容 IE —— 若需支持 IE，回退到
overflow: hidden或clearfix
别在 Flex/Grid 容器里用 float
一旦父容器设了 display: flex 或 display: grid，子元素上的 float 会直接失效（CSS 规范明确定义）。此时还看到重叠，说明 float 没被真正移除，或者父容器其实没生效。
- 检查是否误写成
display: flex-box或拼写错误 - 确认没有其他样式（比如
display: block !important）覆盖了 flex 声明 - 混用
float和flex（如父 flex、子 float）会导致不可预测行为，尤其在 Safari 和旧版 Chrome 中 - 真要模拟“浮动感”（比如卡片悬停上浮），改用
position: relative+z-index，而非依赖 float
z-index，先查 height，再看 float 是否还在不该出现的地方活着。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
