根本原因是父容器高度塌陷，因浮动元素脱离文档流致其高度为0；display: flow-root创建bfc可干净修复，而overflow: hidden和clear: both易引发裁剪或无效问题。
根本原因不是浮动元素“太浮”，而是它的父容器高度塌陷了——父容器压根没把浮动子项算进去，高度变成 0 或极小值，后续块级元素就从顶部开始渲染，视觉上像被盖住。
父容器高度塌陷是遮挡的真正源头
浮动元素（float: left / float: right）会脱离普通文档流，父容器在计算自身高度时直接忽略它们。结果就是：height 计算为 0，边框缩成一条线，背景图只显示一像素高，下方的 div、section 全部“掉”到顶部位置。
- 用浏览器开发者工具检查父容器的
Computed → height，大概率是0px或远小于预期 - hover 浮动元素，看它的 bounding box 是否明显超出父容器范围——这是塌陷的直观证据
- 文字能环绕浮动元素，恰恰说明 float 的本职工作正常；遮挡是布局失控的结果，不是 float 出错
display: flow-root 是最干净的修复方式
给浮动元素的直接父容器加 display: flow-root，就能创建 BFC（块级格式化上下文），让父容器自动包含所有浮动子项，高度自然撑开。
- 不裁剪内容（对比
overflow: hidden可能切掉阴影、下拉菜单、圆角） - 不引入额外 DOM（不用插空
div） - 语义清晰，现代浏览器全支持（Chrome 58+、Firefox 55+、Safari 10.1+）
- 写法就一行：
.container { display: flow-root; }
为什么 overflow: hidden 和 clear: both 容易踩坑
overflow: hidden 虽然也能触发 BFC，但副作用明显；clear: both 则常被误用在错误位置。
-
overflow: hidden会裁掉溢出内容——比如带box-shadow的卡片、悬停展开的下拉菜单、或border-radius外的渐变边缘 -
.container { clear: both; }完全无效：clear 只对自身生效，父容器又不浮动，这个声明毫无作用 - 真正有效的
clear: both只有两种场景：加在最后一个浮动子元素之后的空块级元素上；或加在需要“避开浮动”的下一个兄弟块级元素自身上（比如导航栏下方的主内容区）
最容易被忽略的一点是：很多所谓“修复”看似生效，其实是其他属性意外干扰了层叠上下文——比如父容器加了 transform、opacity: 0.99 或 will-change，会悄悄创建新层叠上下文，让 z-index 行为变得不可预测。查问题时，务必打开开发者工具的「Layer」面板，确认渲染层是否真的分离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
