浮动两栏掉行根本原因是横向空间不足，浏览器严格按width、padding、border、margin计算总宽，超限即换行；应统一box-sizing:border-box、检查dom顺序、优先用flex/grid替代。
浮动式左右两栏布局现在能跑通，但不建议新项目用——它不是“写不出来”，而是后续改起来容易踩坑、协作成本高。
float: left + margin-left 为什么右栏常掉到下一行
这不是浏览器 bug，是 float 脱离文档流后，右栏作为普通块级元素，默认会从左上角开始渲染，而没做任何规避处理。常见写法是给右栏加 margin-left 模拟留空，但漏掉一点就错位。
- 左栏必须设
float: left和明确宽度（如width: 200px） - 右栏必须设
margin-left≥ 左栏总宽度（含padding和border），否则会换行 - 父容器不清理浮动时，高度塌陷：背景色、边框都看不见，
overflow: hidden是最常用补救，但它可能意外裁剪box-shadow或position: absolute子元素
float + overflow: hidden 触发 BFC 的真实作用
右栏设 overflow: hidden 不是为了“隐藏溢出”，而是强制它生成新的 BFC（块级格式化上下文），从而避免和左栏的浮动区域重叠。这是比 margin-left 更稳健的做法，但仍有隐性风险。
- 右栏不需要写
width，它会自动占满剩余空间（前提是父容器有宽度） -
overflow: hidden在某些场景下会截断圆角、阴影或弹层，尤其当右栏内部有position: absolute元素时 - 若右栏内容高度远低于左栏，两者背景色无法自然对齐——因为它们不在同一个 BFC 里，等高需额外 hack
清除浮动的几种写法及其副作用
父容器不清浮动，会导致高度塌陷；但清的方式不同，影响也不同。伪元素法目前最可控，overflow: hidden 最简但副作用明显。
- 推荐伪元素清除：
.container::after { content: ""; display: table; clear: both; } -
overflow: hidden简单，但会限制子元素的视觉溢出行为（比如下拉菜单、tooltip） - 加空
<div style="clear: both"></div>语义污染 HTML，且多一层 DOM 节点
为什么现代项目看到 float 就该警惕
不是它不能用，而是它把布局逻辑和 HTML 结构、CSS 清除规则强耦合，一旦响应式要切单列、或者加动画/过渡，就得重写整套规则。
- HTML 中左栏必须写在右栏前面，违背“主内容优先”的语义习惯
- flex 或 grid 只需改一行
flex-direction或grid-template-columns就能切单列，float 则要删掉所有float、重设width、调整margin - 调试时经常遇到：明明写了
float: left，却没生效——其实是父容器触发了 BFC（比如有display: flex），导致 float 失效，这种隐式冲突很难排查
真正麻烦的不是写出来，而是改——尤其是接手别人用 float 写的两栏，想加个滚动条、做个动画、适配移动端，几乎等于重写。如果只是临时修老系统、兼容 IE8–9，那 float 还能扛；否则，直接上 display: flex 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
