浮动元素导致布局错位而非视觉遮盖，因浮动元素脱离文档流使后续块级元素忽略其存在而重叠；文字绕行是IFC规范行为，专为图文混排设计；现代布局应优先使用flex或grid替代float。
浮动元素“挡住div”其实是布局错位，不是视觉遮盖
浮动元素本身没有z-index层级优势，float: left 或 float: right 的元素只是从普通文档流中“注销”，后续块级元素（如 <div>）在计算自身位置时完全忽略它的存在，直接按它原本该在的位置开始渲染——结果就是两个元素的视觉区域重叠。这不是“盖住”，是“排错了”。
<p>常见错误现象：</p>
<ul>
<li>
<code><div class="float-box"></div>
<div class="normal-box"></div> 中，.normal-box 顶部紧贴父容器顶部，像没看见前面的浮动块
.float-box 有背景色、边框，而 .normal-box 也有背景色，就会出现“被盖住”的错觉文字能绕行，是因为它属于行内格式化上下文（IFC）
段落里的文字、<span></span>、<img alt="为什么CSS浮动元素能挡住div却挡不住文字？" > 等行内内容，会自动参与行内格式化上下文（IFC）。浏览器为每一行生成 line box，并根据浮动元素的边界重新计算该行的可用宽度，所以文字自然“绕开”浮动区域。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 这个行为是规范设计的，初衷就是图文混排（比如新闻稿里图片左浮、文字右绕）
- 是否绕行跟字体语言无关——英文、数字、中文都有效；分隔依据是空格或换行，不是字形
-
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>标签本身是块级元素，但它的子内容（文字节点）是行内盒，绕行的是这些内容，不是<p></p>标签本身
为什么 clear 和 overflow 能“解决”这个问题？
clear 和 overflow 不是修复浮动，而是干预后续元素的布局逻辑：
-
clear: both告诉块级元素：“你上边界必须低于所有浮动元素的底边”，强制下移，避开重叠区域 -
overflow: hidden（或auto、scroll）触发 BFC，让父容器形成独立布局上下文：既包含浮动子元素高度（防塌陷），又阻止外部行内内容跨入浮动影响区 -
display: flow-root是更干净的替代，专为创建无副作用 BFC 设计，现代浏览器支持良好
注意：clear 只对块级元素生效；overflow: hidden 会裁剪真实溢出内容（比如阴影、下拉菜单），不能无脑套用。
真正该警惕的，是还在用 float 做整体布局
浮动本就不是为页面结构设计的，W3C 早已明确将其定位为“图文环绕工具”。现在仍靠 float 实现两栏、三栏，等于主动引入塌陷、绕排、清浮动等一连串连锁问题。
更直接的做法：
- 用
display: flex或display: grid替代——天然不脱标、不塌陷、无绕排干扰 - 若必须兼容老浏览器，优先用
display: inline-block+ 垂直对齐控制，比浮动更可控 - 历史代码中遇到绕排异常，先确认是不是父容器缺失 BFC，而不是急着加
clear
浮动的“字围”是特例行为，不是通用布局机制。把它当结构工具用，等于拿螺丝刀敲钉子——能动，但迟早崩刃。
