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 就能“压住”浮动？

这不是改变了层级，而是触发了 BFC（块级格式化上下文）。BFC 容器会把内部浮动元素“包含”起来，同时规定：BFC 内部的子元素不会与外部元素发生层叠干扰。此时，浮动元素的盒仍然在流内绘制，但它的边界不再和外部块级元素重叠，视觉上就不再“盖住”它们。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• overflow: hidden、display: flow-root、float、position: absolute 都可触发 BFC
• 用 display: flow-root 更语义清晰，且无 overflow 副作用（比如意外裁剪）
• 不要依赖 z-index 试图“压”浮动元素——它根本不起作用

什么时候浮动真会“穿透”到其他层叠上下文之上？

只有当浮动元素的祖先触发了层叠上下文（比如设置了 opacity 、<code>transform、will-change 或 z-index），而该祖先的层叠等级又高于目标元素所在上下文时，浮动元素才会随祖先一起“抬升”。这时不是浮动本身层级高，而是它被“带上去”的。

• 检查祖先链中第一个设置了 z-index 且值不为 auto 的定位元素
• 注意 opacity: 0.99 也会隐式创建层叠上下文，常被忽略
• 用浏览器开发者工具的“Layers”面板或勾选“Show layer borders”可验证实际层叠结构
浮动本身没有 z-index，所谓“层级高”只是渲染顺序 + 背景缺失 + BFC 缺失共同造成的视觉假象；真正要控制覆盖关系，得从层叠上下文和绘制顺序入手，而不是调浮动。