浮动元素脱离文档流导致后续块级元素布局错位而视觉重叠，并非z-index遮盖；文字能绕行因属行内格式化上下文，块级元素需clear或触发bfc才能避开。
浮动元素本身不会“主动覆盖”，而是因为脱离文档流后，后续非浮动块级元素仍按原位置渲染，造成视觉重叠——本质是布局错位，不是z-index意义上的遮盖。
float 脱离文档流后，后续块级元素“看不见”它
设置 float: left 或 float: right 的元素会从正常文档流中移除，不再参与父容器的高度计算，也不再为后续块级元素（如 <div>、<code><p></p>）留出空间。后续块级元素会直接从它原本该在的坐标开始渲染，而这个坐标往往和浮动元素的视觉区域重合。
- 常见错误现象：
<div class="float-box"></div> <div class="normal-box"></div>中，.normal-box顶部紧贴页面顶部，像没看到前面的浮动块一样 - 这不是 bug，是规范行为：W3C 明确规定非浮动块级元素不绕行，只行内内容（文本、
<img>）会自动调整 line box 绕开浮动区域 - 如果浮动元素高度大于后续块级元素，重叠更明显；若后续元素有背景色或边框，就会被“盖住”
为什么文字能绕行，但 <div> 不行
<p>绕行（wrap）是行内格式化上下文（IFC）的特性，只作用于行内盒（inline boxes）。块级元素默认建立自己的块级格式化上下文（BFC），彼此隔离，不响应浮动的边界。</p>
<ul>
<li>
<code><p></p> 里的文字会绕，是因为文字属于行内内容，浏览器会为每一行重新计算可用宽度
<div> 是块级盒，它只看“自己该在哪”，不查“前面有没有浮动的东西”
<li>想让块级元素也“避开”浮动区域？要么也设 <code>float，要么设 display: inline-block，要么用 clear
clear 是最直接的干预手段
clear: left / clear: right / clear: both 告诉元素：“我下面不能有指定方向的浮动元素”，强制它下移到所有符合条件的浮动元素下方。
- 典型用法：
<div style="clear: both"></div>放在浮动元素之后，作为“清除浮动”的占位块 - 注意：
clear只对块级元素生效，对<span></span>等行内元素无效 - 不要滥用：
clear: both会打断流式布局，比如想实现两栏+底部通栏时，底部必须 clear 才能不被浮动栏顶上去
现代开发中，别靠 float 做主布局
float 本意是图文混排，不是为多栏布局设计的。强行用它做网格，容易触发塌陷、绕行不可控、响应式困难等问题。
- 父容器塌陷问题：浮动子元素不撑高父容器，导致背景、边框消失 —— 常见修复是触发 BFC（如
overflow: hidden）或伪元素清浮动 - 移动端适配难：float 无法响应式断行，
flex和grid天然支持 - 真正需要 float 的场景只剩：图片左/右浮动 + 文字环绕；少量兼容性兜底（IE8–）
最容易被忽略的一点：float 元素的“覆盖”感，往往来自开发者误以为它像 position: absolute 那样拥有独立 z-index 层级——其实它只是普通文档流里一个“看不见但还在那儿”的占位幽灵，后续块级元素不是被盖住，是根本没打算躲。
