右侧必须触发bfc而非仅设margin-left，因float元素脱离文档流，右侧块级元素仍按正常流从顶部渲染，仅加margin-left只是平移位置而非避让浮动区；触发bfc（如overflow:hidden或display:flow-root）才能使右侧容器主动避开浮动区域，实现真正自适应剩余宽度。
为什么右侧必须触发 BFC，而不是只加 margin-left
因为 float 元素完全脱离文档流，右侧块级元素默认“看不见”它占位——它仍会从容器顶部开始渲染，文字直接顶到左栏下方。只写 margin-left: 200px 并不能让右侧“绕开”浮动区，只是在原有位置上向右挪了 200px，若内容高度不足，就会和左栏重叠或错行。
触发 BFC（如 overflow: hidden）才是关键：它强制右侧容器形成独立渲染上下文，浏览器在布局时会主动避开所有浮动元素占据的空间，实现真正的“自适应剩余宽度”。
- 不触发 BFC → 右侧按正常流排布，无视浮动，极易重叠
- 仅设
margin-left→ 挪动位置但不改变布局上下文，无法避让 -
overflow: hidden、display: flow-root、overflow: auto都可触发 BFC，但行为不同
overflow: hidden 是最常用写法，但它有副作用
overflow: hidden 确实兼容性最好（IE8+），也是老项目里最常写的方案，但它不是为“清浮动”设计的——它是借用了触发 BFC 的副作用。
副作用包括：
- 真正溢出的内容（比如
box-shadow、position: absolute子元素超出边界部分）会被裁剪 - 如果右侧内部需要滚动（比如长列表），
hidden会直接禁掉滚动条 - 某些 CSS 属性（如
filter或transform）在旧版 IE 中可能意外触发硬件加速
所以调试时看到阴影被切、下拉菜单被截断，先检查是不是 overflow: hidden 搞的鬼。
display: flow-root 是更干净的现代替代方案
display: flow-root 是专为解决这类问题而生的，语义明确、无副作用，且在 IE11+ 和所有现代浏览器中稳定支持。
用法极其简单：
.right {
display: flow-root;
}
- 它只做一件事：创建 BFC，不干涉溢出行为
- 内部
overflow: auto依然可用，box-shadow不会被裁 - 不需要配
*zoom: 1或::after清除浮动 - 如果要兼容 IE10 及以下，才退回
overflow: hidden，并额外测试绝对定位子项是否偏移
左侧浮动 + 右侧 BFC 的 DOM 顺序不能错
HTML 中 #sidebar 必须写在 #content 前面。这是硬性限制，不是建议。
原因在于：BFC 的避让逻辑只作用于“后续兄弟元素”，如果右侧元素 DOM 在前，它渲染时左侧浮动还没出现，就完全不会参与避让计算。
- ✅ 正确：
<div id="sidebar"></div> <div id="content"></div> - ❌ 错误：
<div id="content"></div> <div id="sidebar"></div>→ 右侧永远不避让 - 别指望用
order或flex-direction补救——BFC 触发点在渲染早期，CSS 排序不影响它
这个顺序问题在重构老系统时最容易翻车，尤其当后端模板把 content 渲染在前、sidebar 插入在后时，必须调整 HTML 结构才能生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
