BFC导致的“布局重叠”实为浮动脱离文档流引发的渲染错乱，如文字被浮动元素覆盖或父容器高度塌陷，并非视觉层叠；BFC通过创建独立渲染区域隔离干扰，常用overflow:hidden触发，但需作用于非浮动兄弟元素，display:flow-root更安全无裁剪副作用。
什么是BFC导致的“布局重叠”
实际开发中说的“布局重叠”，多数不是元素视觉上真的叠在一起，而是指浮动元素脱离文档流后，后续非浮动块级元素向上塌陷、被浮动内容覆盖——比如右侧文字被左浮动导航栏挡住，或父容器高度塌陷后背景色消失。这种“重叠”本质是文档流断裂 + 渲染顺序错乱，BFC能切断这种干扰。
用 overflow: hidden 包裹浮动兄弟元素最直接
当左浮动菜单 + 右侧主内容并排时，右侧若不创建 BFC，它会无视浮动区域，从顶部开始渲染，结果文字被菜单盖住。
-
overflow: hidden是最常用且兼容性最好的触发方式（IE6+ 支持） - 必须作用在**非浮动的兄弟元素上**，比如右侧内容容器，而不是浮动菜单本身
- 不要只写
overflow: hidden就完事：如果右侧内容本身有溢出需求（如长文本、横向滚动），改用overflow: auto更安全 - 注意副作用：
overflow: hidden会裁剪掉该元素内所有溢出内容（包括position: absolute子元素超出部分）
父子间高度塌陷 ≠ 视觉重叠，但常被误认为“重叠”
父容器没设高度，子元素全为 float: left，结果父容器高度变成 0，背景/边框消失，下方元素“顶上来”——看起来像被子元素“穿透重叠”了。这不是真重叠，是父容器没撑开。
- 给父容器加
overflow: hidden或display: flow-root即可让其包含浮动子元素高度 -
display: flow-root是现代方案（Chrome 64+/Firefox 59+），无溢出裁剪副作用，语义更清晰 - 避免用
float或position: absolute触发父容器BFC，否则父容器自身也脱离文档流，引发新布局问题
为什么 display: flex 容器内部不出现外边距重叠
很多人发现：把两个 margin: 20px 的块放进 display: flex 容器里，间距是 40px，没重叠。这是因为 flex 容器自动成为 BFC，且其子元素在 Flex 布局中已不参与常规块级格式化，外边距折叠规则失效。
立即学习“前端免费学习笔记（深入）”；
- 这属于 BFC 的间接效果，不是靠“阻止重叠”实现的，而是整个布局模型切换了
- 同理，
display: grid容器也有相同行为 - 别为了防重叠硬套
flex：如果只是两个普通段落，用overflow: hidden包一层更轻量
真正容易被忽略的是：BFC 不是万能胶，它只隔离“块级格式化上下文”，对 position: absolute 元素、行内元素、Flex/Grid 子项的定位和尺寸计算影响有限。解决所谓“重叠”，先确认是浮动塌陷、外边距折叠，还是 z-index 层级问题——选错原因，加再多 BFC 都白搭。
