浮动元素不覆盖static块级元素，而是因渲染顺序、无背景及BFC缺失造成视觉错觉；它脱离文档流，致后续块级元素位置计算错误且不绕行，仅行内内容自动绕开；clear需加在被干扰元素上，隐性层叠上下文（如transform）会改变层级关系。

浮动元素不会“覆盖”static块级元素，而是后者在视觉上“叠在它下面”——根本原因是渲染顺序 + 背景缺失 + BFC 缺失共同造成的错觉，不是z-index意义上的覆盖。

浮动元素脱离文档流，导致后续块级元素位置计算错误

float: left/right 的元素会从正常文档流中移除，不再参与父容器高度计算，也不为后续块级元素（如

、

）预留空间。后续 static 块级元素仍按“原该在的位置”渲染，而这个位置往往与浮动元素的视觉区域重合。

• 常见现象：
  中，.normal-box 顶部紧贴视口顶部，像没看到前面的浮动块
• 这不是 bug，是 W3C 规范行为：非浮动块级元素默认不绕行，只行内内容（文本、）会自动调整 line box 绕开浮动区域
• 如果 .normal-box 没设背景色或边框，就完全看不出它“在上面”，只会看到浮动元素的背景“透出来”

box-shadow 被遮挡、下拉菜单错位，本质都是同一问题

浮动元素的 box-shadow 被相邻

盖住，下拉菜单定位飞走，都不是因为浮动“层级高”，而是它被画在了父容器的层叠上下文中，且绘制顺序早于后续兄弟元素。

• 浮动元素本身不创建层叠上下文，z-index 对它无效（除非加 position: relative）
• 后续 static 块级元素虽无 z-index，但浏览器按文档流顺序渲染：先画浮动元素，再画它；若后者没背景，阴影就被压在底下
• 下拉菜单用 position: absolute 时，会向上找最近的已定位祖先；浮动父级不算（position: static），结果锚定到 ，位置彻底失控

clear: both 不是万能解，必须用对地方

clear 只对仍在文档流中的块级元素生效，且必须加在“被干扰的那个元素”上，不是加在浮动元素自己身上，也不是加在父容器上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 如果目标元素是 display: inline 或 display: inline-block，clear 完全忽略
• 浮动方向是 float: right，但你只写 clear: left，它不会下移
• 该元素有 margin-top: -20px 这类负边距，clear 效果会被抵消，看起来像失效
• 媒体查询中取消了浮动，但没同步移除 clear，会导致意外空白

真正卡住人的，往往是隐性层叠上下文

相邻元素哪怕只加了一行 transform: translateY(0) 或 opacity: 0.99，就会隐式创建新的层叠上下文，且这个上下文的层级天然高于普通文档流中的浮动元素——即使后者加了 z-index: 999 也盖不过去。

• 用开发者工具的 “Layers” 面板或 Elements → Styles → “Computed” 查看 stacking context 字段，确认是否真分属不同层
• 临时删掉相邻元素的 transform、opacity、filter，看遮挡是否立刻消失
• 若必须保留这些属性，可让浮动元素所在容器也加 transform: translateZ(0)，强制升级为独立层叠上下文，再靠 z-index 控制相对顺序

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！