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