浮动方案核心是负 margin + bfc，用于兼容 ie8–9，本质是通过 margin-left 负值位移并触发 bfc 避免重叠，html 中 sidebar 必须在 content 前，右侧需精确匹配左侧 border-box 宽度，现代项目优先用 flexbox。
浮动方案的核心是负 margin + BFC 触发
浮动方案现在基本只用于兼容 IE8–9 或极老系统，但理解它有助于排查 legacy 项目中的布局错乱。它的本质不是“右侧自适应”，而是让右侧块在视觉上避开左侧浮动块——靠的是 margin-left: -200px（负值等于左侧宽度）+ width: 100% 的组合位移，再用 BFC 防止重叠。
HTML 结构必须左侧在前，且不能用 display: inline-block
浮动依赖文档流顺序，如果 sidebar 放在 content 后面，float: left 会把它挤到下一行——这是最常复现的“右侧没显示”问题。
-
sidebar必须写在 HTML 中content之前 - 父容器不能设
display: inline-block，否则会破坏浮动上下文 - 避免给
content设float，否则需额外清除浮动，容易引发高度塌陷
右侧元素必须触发 BFC，且 margin-left 要精确匹配左侧总宽度
仅靠 margin-left: 200px 不够：若左侧有 border 或 padding，实际占用空间大于 200px，右侧就会被遮挡或换行。真正要减的是左侧的 border-box 宽度总和。
- 推荐写法：
.content { overflow: hidden; }（触发 BFC，兼容 IE8+） - 更稳妥的兜底：
.container::after { content: ""; display: table; clear: both; } -
margin-left值 = 左侧width+padding-left+padding-right+border-left-width+border-right-width
IE 下 overflow: hidden 可能裁剪 tooltip 或下拉菜单
当右侧区域里有 position: absolute 元素（比如弹出菜单），而父容器用了 overflow: hidden，这些元素会被截断——这不是 bug，是 BFC 的正常行为。
- 此时不能简单换成
overflow: visible，否则浮动塌陷重现 - 正确解法：把弹出类元素挂到
body下，用 JavaScript 动态定位 - 或者改用
::after清除浮动，避免在容器上设overflow
display: flex；只有当你接手一个明确要求兼容 IE8 的旧系统时，才需要抠清 margin-left 和 border-box 的差值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
