clear: both 仅对浮动元素之后的同父级块级兄弟元素生效，加在浮动元素自身、非块级元素或跨父容器元素上均无效；解决父容器塌陷应优先用 display: flow-root 或触发 bfc。
浮动元素遮挡其他内容，根本不是 z-index 没设对，而是它压根没被父容器“包住”，或者后续元素没主动避开——z-index 对 float 元素本身完全无效，别在这儿浪费时间调。
为什么 clear: both 加在浮动元素自己身上没用
clear 只作用于文档流中「后面的兄弟块级元素」，不是给浮动元素加的。它告诉这个元素：“你得等前面所有 float: left 或 float: right 的兄弟都让开水平空间后，再开始渲染”。所以：
- 写在浮动元素自身上（比如
.float-box { clear: both; }）完全无效 - 必须加在浮动元素之后的下一个块级元素上，例如
.content { clear: both; } - 如果那个元素是
display: inline或inline-block，clear也不生效 - 常见错误：加了
clear: both的<div> 没设高度、也没清除父容器塌陷，结果视觉上还是“没清干净” <h3>overflow: hidden 能清浮动，但会裁剪溢出内容</h3> <p>给浮动元素的**直接父容器**设 <code>overflow: hidden（或auto），本质是触发 BFC（块级格式化上下文），强制它包含所有浮动子项。这能解决父容器高度塌陷导致背景图消失、边框不显示等问题。- 优点：一行 CSS，不用改 HTML，兼容性好（IE6+）
- 风险：
overflow: hidden会裁剪掉超出容器的position: absolute子元素（比如下拉菜单、气泡提示） -
overflow: auto在 Safari 中可能凭空出现滚动条，尤其当容器有 border 或 padding 时 - 它只解决父容器塌陷，**不解决后续兄弟元素被浮动顶走的问题**——那是
clear的事
display: flow-root 是现代首选，但 IE 不支持
display: flow-root是专为包裹浮动设计的值，效果和overflow: hidden一样（创建 BFC），但语义清晰、无副作用。- 不会意外裁剪
absolute子元素，也不会引发滚动条 - 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+
- IE 和老 Safari（overflow: hidden 或伪元素方案
- 别和
display: inline-block混用——后者也创建 BFC，但会带来基线对齐和空白间隙问题
浮动盖住绝对定位子元素？先看父容器有没有层叠上下文
如果
div.float-left盖住了它内部的div.tooltip { position: absolute; z-index: 999; }，问题不在子元素，而在父容器没创建层叠上下文。-
float元素本身不创建层叠上下文，它的子元素的z-index只在“默认层叠上下文”里生效，无法压过同级浮动块 - 必须给父容器加
position: relative+z-index: 0（哪怕只是 0，也能触发新上下文） - DOM 顺序依然重要：即使上下文建好了，后写的浮动容器仍会自然盖住先写的同级定位元素
- 不要给浮动元素本身设
z-index却不配position——浏览器直接忽略
真正麻烦的从来不是怎么清，而是清哪儿、清几层、以及清完之后后续元素是否还在正常流里。一个没清干净的浮动，后面三四个模块都会错位，别指望靠
z-index补救。
