浮动+负外边距左固定右自适应易出错，因依赖HTML顺序、需左侧设宽、右侧用等值负margin并同float，父容器须BFC防塌陷，且box-sizing必须为border-box。
为什么用浮动 + 负外边距做左固定右自适应容易出错
这种布局本质是“伪双栏”，靠浮动元素脱离文档流、再用负 margin 把右侧内容拉回视觉正确位置。但它对 HTML 结构敏感，且一旦父容器没设清除浮动或高度塌陷，右侧内容就会错位甚至消失。
常见错误现象：margin-left 设大了右侧被挤到下一行；float: left 的左侧容器没设宽度，导致右侧 margin 计算失准；父容器未触发 BFC，高度塌陷后背景/边框不包裹右侧内容。
- 左侧容器必须显式设置
width（如200px），不能只靠内容撑开 - 右侧内容需同时设置
margin-left（值 = 左侧宽度）和float: left，否则无法与左侧并排 - 父容器必须清除浮动，推荐用
overflow: hidden或display: flow-root（后者更现代）
具体怎么写 HTML 和 CSS 才能跑通
HTML 结构必须是：左侧浮动元素在前，右侧内容紧随其后（顺序不能反）。CSS 中右侧的 margin-left 值必须严格等于左侧宽度，且两者都需 float: left —— 否则负值技巧不生效。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow: hidden; /* 触发BFC，防止塌陷 */
}
.left {
float: left;
width: 200px;
background: #eee;
}
.right {
float: left;
margin-left: -200px; /* 关键：负值 = 左侧宽度 */
width: 100%;
background: #ddd;
}注意：margin-left: -200px 不是“抵消左侧”，而是把右侧内容块整体左移 200px，再靠自身 width: 100% 填满整行，实现视觉上的“右侧自适应”。
IE8–IE9 下 display: flow-root 不支持怎么办
display: flow-root 在 IE 完全不支持，而 overflow: hidden 虽然兼容性好，但会意外裁剪溢出内容（比如下拉菜单、tooltip）。这时更稳妥的兜底方案是用 ::after 伪元素清除浮动。
- 给父容器加类
.clearfix，再定义：.clearfix::after { content: ""; display: table; clear: both; } - 避免用
zoom: 1（IE专有 hack），它在现代浏览器中无意义且干扰可维护性 - 如果右侧内容里有绝对定位元素，要确认其
top/left是相对于哪个祖先 —— 浮动布局下，position: relative必须显式加在父级上，否则可能参照错层
比起 Flex/Grid，这方案现在还值得用吗
纯从功能讲，浮动 + 负 margin 仍能工作，但它的脆弱性远高于现代方案。Flex 布局一行 display: flex + flex: 0 0 200px / flex: 1 就搞定，且天然防塌陷、响应式友好；Grid 更直接：grid-template-columns: 200px 1fr。
唯一还可能遇到它的场景：维护老项目、需要兼容 IE9 及以下（但 IE9 已基本退出主流）、或某些 CMS 模板硬编码了浮动结构且无法改 HTML。
真正容易被忽略的点是：负 margin 布局下，右侧内容的 box-sizing 必须是 border-box，否则 padding 会撑破 100% 宽度，导致横向滚动条出现 —— 这个细节连很多老手都会漏查。
