根本原因是浮动元素脱离文档流导致父容器高度塌陷，而文字能环绕是因行内内容仍避让浮动框；背景属块级容器，无法感知已脱离流的子元素。

浮动后文字环绕但背景重叠，根本原因是浮动元素脱离文档流，父容器高度塌陷，导致背景无法包裹内容；文字能环绕是行内内容的固有行为，而背景属于块级容器，它“看不见”浮动子元素。

为什么文字能绕、背景却塌了

float 的设计本意就是图文混排：文字（行内内容）会自动避让浮动框边界，所以看起来“绕”得自然；但块级父容器在计算自身高度时，完全忽略已脱离文档流的浮动子项，height 变成 0 或极小值，背景色/边框就缩成一条线，后续内容直接顶上来——这不是样式冲突，是布局机制使然。

• 检查 DevTools 中父容器的 Computed height，若为 0px，基本可确认是塌陷问题
• float 元素本身仍参与行内格式化上下文（IFC），所以文字能感知并绕行
• 但父容器若未触发 BFC（块格式化上下文），就无法包含浮动子项的高度

clear: both 加在哪才有效

clear: both 不是用来“撑开父容器”的，它是给**后续兄弟块级元素**用的，作用是让它从浮动结束位置的下方开始渲染，避免视觉重叠。但它不解决父容器背景塌陷，也不自动产生间距。

• ✅ 正确用法：在浮动元素之后的下一个 <h2></h2>、<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> 或 <div> 上加 <code>clear: both
• ❌ 错误用法：加在浮动元素自己身上（img 或 .float-left），无效
• ❌ 错误用法：加在父容器上（父容器不是“浮动之后的兄弟”，浏览器不处理该语义）
• 注意：clear 只对 display: block 或 table 等块级盒生效，display: inline 元素加了也无效

真正撑起背景的三种可靠方式

要让父容器背景完整显示，必须让它“感知”到浮动子项高度。现代项目优先选前两种，旧项目兼容性要求高时用第三种。

立即学习“前端免费学习笔记（深入）”；

• display: flow-root —— 最干净：在父容器上设置，创建新 BFC，无裁剪副作用，Chrome 64+/Firefox 61+/Safari 15.4+ 均支持
• overflow: hidden —— 能用但有风险：同样触发 BFC，但可能裁剪 position: absolute 下拉菜单、阴影或横向滚动内容
• .clearfix::after 伪元素 —— 兼容性最强：给父容器加类，内部用 content: "" + display: table + clear: both，IE8+ 可用

更彻底的解法：别用 float 做布局

浮动本就不该用于多列容器布局。文字环绕是它的正经用途，而用它实现两栏、三栏，本质是 hack。现代项目中，只要目标浏览器支持，应直接切换：

• 横向排列用 display: flex：父容器一行声明，子项自动对齐、换行、等高，gap 控制间距，背景天然撑开
• 二维网格用 display: grid：grid-template-columns 定义列宽，grid-auto-rows 控制行高，完全规避塌陷
• 若仅需图文混排（如文章插图），保留 float 即可，但确保 img 加 display: block 和正确 margin，避免行内对齐干扰

真正容易被忽略的是：清除浮动和撑开背景是两件事，常被混为一谈；而 clear: both 加错位置，是调试时最耗时间的低级错误。