父容器背景/边框消失是因为浮动元素脱离文档流，导致父容器高度塌陷为0；解决方法是用clearfix伪元素（.clearfix::after{content:"";display:table;clear:both}）触发bfc，或用overflow:hidden强制创建bfc，但后者可能裁剪溢出内容。
为什么父容器背景/边框突然消失
给 div 加了 float: left 或 float: right 后，父容器高度变成 0，背景色、边框看不见，后续元素往上叠——这不是 bug，是浮动元素脱离文档流的必然结果。父容器计算高度时直接忽略它们，就像它们不存在一样。
常见错误写法：div 自己设 float: left; clear: both → 没用，它只影响自己位置，不撑父容器；给父容器加 clear: both → 无效，clear 不作用于子元素。
clearfix 伪元素法（现代项目首选）
用 ::after 插入一个无内容、参与布局的块级元素，触发 BFC，让父容器“看见”浮动子项。不新增 DOM，语义干净，兼容 IE8+。
-
.clearfix::after必须包含三要素：content: ""+display: table（比block更稳，避免 line-height 继承） +clear: both - IE8 及以下需用单冒号写法：
.clearfix:after，否则不生效 - 别漏掉
.clearfix::before（或至少保证::after前没有 margin-top 折叠风险），但最小可用精简版就是：.clearfix::after { content:""; display: table; clear: both; } - 必须给父容器加
class="clearfix"，不是子元素
overflow: hidden 看似简单，但有隐藏代价
给父容器设 overflow: hidden 或 overflow: auto，本质是触发 BFC，强制包含浮动子项。一行 CSS 解决，但副作用明显：
- 可能意外裁剪子元素：下拉菜单、tooltip、position: absolute 的弹层超出父边界时被切掉
- 某些安卓 WebView 对
overflow: hidden渲染不稳定，窄屏下内容被截断 - 滚动行为被禁用（
hidden）或引入多余滚动条（auto），影响交互预期 - 若父容器本身需要 overflow visible（比如动画溢出），这条路直接堵死
什么时候该放弃清除浮动
清除浮动本身就是一个信号：你正在用过时工具解决本不该存在的问题。真正该问的是——这里非得用 float 吗？
- 图文环绕（文字绕图）：
float: left仍是合理且轻量的选择，无需替代 - 多栏布局、导航栏、卡片网格：优先用
display: flex或display: grid，父容器自动撑开，零清除成本 - 仍要兼容 IE9 及以下？那
clearfix得留着，但新模块别再用float搭骨架 - 响应式切换时，若还用
float，记得媒体查询里同步重置float、width和clear，否则移动端大概率叠在一起
最常被忽略的一点：很多团队机械套用 clearfix，却没意识到，只要还在为“清除浮动”写代码，就说明布局结构已经偏离了现代 CSS 的设计意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
