BFC是解决浮动侧边栏高度不一致导致底色断层的标准解法，推荐overflow: hidden触发；底色伪装和边框拉伸属临时补救，本质未解决问题；现代布局应优先选用Flex或Grid。
浮动侧边栏高度不一致导致底色断层
纯靠 float 的侧边栏和主内容高度不同，背景色或边框在视觉上就“断开”了——这不是渲染错误，是浮动脱离文档流后父容器塌陷的必然结果。常见于老式两栏布局（比如 aside 左浮、main 右浮），尤其当侧边栏内容少而主内容长时最明显。
- 别指望给父容器加
height: 100%或min-height能解决问题，它没参照物 - 用
background-color填满整行？不行，父容器高度仍是 0 - 真正有效的是让父容器“重新包含”浮动子元素，也就是触发 BFC
用 BFC 包裹父容器来撑高
BFC（块级格式化上下文）能让容器自动包含其内部浮动元素，从而获得正确高度。这是最干净、语义最正的解法，现代浏览器全支持。
- 触发 BFC 的方式很多，推荐用
overflow: hidden或overflow: auto（兼容性好，无副作用） - 避免用
display: flow-root—— 虽然语义更准，但 IE 完全不支持，Edge 17+ 才开始支持 - 如果父容器本身需要滚动，慎用
overflow: hidden，优先选overflow: auto
示例：
.layout {
overflow: hidden; /* 触发 BFC，父容器就能包住浮动子项 */
}
.sidebar { float: left; width: 200px; }
.main { float: right; width: calc(100% - 200px); }
底色伪装法只适用于视觉补救
当无法修改 HTML 结构或不能触发 BFC（比如受限于第三方 CSS），才考虑“底色伪装”：给父容器设背景色，再给主内容区域叠加一层同色遮罩，让侧边栏短一截也不显眼。
- 本质是视觉欺骗，不是真等高，打印、截图、屏幕阅读器仍暴露结构缺陷
- 必须确保主内容区域的背景色完全覆盖父容器底色，否则留白处会漏出原始背景
- 如果主内容有透明背景或渐变，这招直接失效
例如：
.layout {
background-color: #f5f5f5;
}
.main {
background-color: white; /* 盖住父级底色 */
margin-left: 200px; /* 避免文字被侧边栏遮挡 */
}
边框拉伸法容易引发重绘和错位
有人用伪元素或额外 div 拉伸边框来模拟等高效果，比如给父容器设 border-left，再用绝对定位把边框“拉到底”。这方法脆弱且难维护。
立即学习“前端免费学习笔记（深入）”；
- 高度依赖 JavaScript 动态计算，页面内容变动（如展开折叠）必须手动重算，易遗漏
- 滚动时可能因渲染时机问题出现边框跳动或错位
- 响应式场景下，媒体查询切换宽度时，边框位置极易偏移
- 移动端 touch 事件区域也可能被伪元素干扰
除非 legacy 系统强约束且无其他选择，否则不建议走这条路。
真正关键的点在于：BFC 是标准解法，但得确认父容器是否已有影响溢出的属性（比如 overflow: visible 被覆盖）；而所有“伪装”方案，都绕不开一个事实——浮动本身已过时，Flex 或 Grid 才是等高布局的自然答案。只是当你不得不修老代码时，得知道哪条路不会突然崩掉。
