本质是绕过文档流的视觉对齐，非真等高且不响应内容变化；右栏掉行因未触发bfc而被浮动层顶下，负margin仅凭数值偏移，现代项目应优先用flex/grid。
用 float 配合 margin-left 负值实现两栏自适应，本质是“绕过文档流约束的视觉对齐”，不是真等高、也不自动响应内容变化。它只在特定旧环境里能凑效，现代项目应直接跳过。
为什么右栏加 margin-left: -100% 有时能并排，有时掉到下一行
根本原因是：左栏 float: left 后脱离文档流，右栏若没触发 BFC，就会从容器顶部开始渲染，被浮动层“顶下去”。margin-left: -100% 的作用不是让右栏“靠左”，而是把它从右侧硬拽回左栏右侧位置——前提是右栏本身宽度足够窄（比如没设 width），且父容器有明确宽度。
- 右栏必须是块级元素，且不能设
width: 100%（否则负 margin 拽不动） -
margin-left: -100%的参考基准是父容器宽度，不是左栏宽度；若父容器宽 800px，-100% 就是 -800px，极易错位 - IE6/7 对该写法解析不稳定，常需额外 hack，如
zoom: 1 - DOM 顺序必须是“右栏在左栏之后”，否则负 margin 失效
float + margin-left 负值的真实适用场景
它只在一种情况真正必要：你无法改动 HTML 结构，又必须让右栏紧贴左栏右侧，且左栏宽度固定、右栏内容高度不可控，同时还要兼容 IE8 及以下（比如某些政府内网老系统或 CMS 输出锁定的模板）。
- 典型结构：
<div class="left"></div> <div class="right"></div>，不能调换顺序 - 左栏必须设固定宽，如
width: 200px，且float: left - 右栏不设
width，但必须触发 BFC（overflow: hidden或display: table-cell） - 右栏
margin-left值应 ≥ 左栏宽度（如margin-left: 200px），而不是负值；负值仅用于“右栏在前、左栏在后”的反向 DOM 场景
常见错误：把 margin-left 负值当“自适应”用
很多人误以为给右栏设 margin-left: -200px 就能让它“自动避开左栏”，其实这只是把右栏往左拉 200px，如果左栏变宽或屏幕缩放，它立刻重叠或错位。
- 负 margin 不感知兄弟元素尺寸，只按数值偏移
- 右栏若设了
width: calc(100% - 200px)，再加margin-left: -200px，结果是宽度压缩 + 位置左移，大概率溢出容器 - 移动端 viewport 缩放时，固定像素的负 margin 会放大错位感
- 调试时用 DevTools 看右栏盒模型，会发现它的 border-box 已经超出父容器边界——这是负 margin 的正常表现，不代表布局成功
真正要兼顾兼容性与可维护性，float + 负 margin 是条窄路：它要求 DOM 顺序、BFC 触发、像素级尺寸匹配全部严丝合缝。稍有变动就得重调，而 Flex/Grid 一行 display: flex 就能解掉所有约束。最容易被忽略的是——负 margin 布局里，你永远得手动同步左栏宽度、右栏 margin、父容器 padding，三者差 1px 就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
