BFC是CSS中独立的块级布局区域，内部元素垂直排列、margin不重叠、包含浮动、不与外部浮动重叠、宽度自适应；触发条件包括根元素、float不为none、overflow不为visible、position为absolute/fixed/sticky、display为inline-block/table-cell/flex/grid等。
浮动元素的层叠上下文不独立，但会“视觉上盖住”普通流内元素
浮动元素本身不创建新的层叠上下文（z-index 无效），但它脱离普通文档流后，后续的非定位块级元素会围绕它排版，而文字内容则可能被“挤到旁边”。真正造成“看起来层级更高”的错觉，是因为浮动元素的盒模型在渲染时被提前绘制，且其 background 和 border 会覆盖紧邻的、尚未布局完成的流内元素背景——尤其当后者没有设置背景色时更明显。
- 浮动元素仍属于父容器的层叠上下文，
z-index对它完全无效 - 未定位的块级元素（如
<div>）默认在 <code>auto层叠等级，绘制顺序靠后 - 浏览器先绘制浮动元素（含背景/边框），再绘制后续流内块，若后者没设
background，就露出浮动元素的底色 -
overflow: hidden、display: flow-root、float、position: absolute都可触发 BFC - 用
display: flow-root更语义清晰，且无overflow副作用（比如意外裁剪） - 不要依赖
z-index试图“压”浮动元素——它根本不起作用 - 检查祖先链中第一个设置了
z-index且值不为auto的定位元素 - 注意
opacity: 0.99也会隐式创建层叠上下文，常被忽略 - 用浏览器开发者工具的“Layers”面板或勾选“Show layer borders”可验证实际层叠结构
为什么给父容器加 overflow: hidden 就能“压住”浮动？
这不是改变了层级，而是触发了 BFC（块级格式化上下文）。BFC 容器会把内部浮动元素“包含”起来，同时规定：BFC 内部的子元素不会与外部元素发生层叠干扰。此时，浮动元素的盒仍然在流内绘制，但它的边界不再和外部块级元素重叠，视觉上就不再“盖住”它们。
什么时候浮动真会“穿透”到其他层叠上下文之上？
只有当浮动元素的祖先触发了层叠上下文（比如设置了 opacity 、<code>transform、will-change 或 z-index），而该祖先的层叠等级又高于目标元素所在上下文时，浮动元素才会随祖先一起“抬升”。这时不是浮动本身层级高，而是它被“带上去”的。
浮动本身没有 z-index，所谓“层级高”只是渲染顺序 + 背景缺失 + BFC 缺失共同造成的视觉假象；真正要控制覆盖关系，得从层叠上下文和绘制顺序入手，而不是调浮动。
