根本原因是浮动元素脱离文档流且右栏未触发BFC；右栏须用overflow:hidden等触发BFC，左栏设固定宽，右栏用width:calc(100%-200px)实现响应式，现代项目应优先使用Flex或Grid布局。
float 左栏 + margin-right 实现两栏时，右边内容被挤到下一行
根本原因是浮动元素脱离文档流，而右侧块级元素没有设置 overflow 或触发 BFC，导致它“看不见”浮动区域，直接从左上角开始渲染，文字可能被浮动层遮盖，或整块掉到下面。
常见错误写法：float: left 左栏后，右栏只设了 margin-left，没处理自身布局上下文。
- 右栏必须触发 BFC：推荐加
overflow: hidden（或auto），这是最轻量、兼容性最好的方式 - 左栏需设明确宽度（如
width: 200px），否则浮动后宽度由内容撑开，右栏 margin 不好算 - 右栏的
margin-left值要 ≥ 左栏宽度 + 间隙，不能靠“自适应”蒙混
右栏想填满剩余空间，但 margin-right 写死会破坏响应式
用固定 margin-left 确实无法随视口缩放——这不是 bug，是 float 机制决定的：它只认像素值，不支持 calc() 在老浏览器里也受限。
真正可行的响应式做法是放弃给右栏设 margin-left，改用 width: calc(100% - 200px) 配合 BFC：
立即学习“前端免费学习笔记（深入）”；
.left { float: left; width: 200px; }
.right { overflow: hidden; width: calc(100% - 200px); }注意：calc() 在 IE9+ 支持，若需兼容 IE8，只能用 JS 动态算宽，或换 Flex。
IE8 下 float 两栏错位、高度塌陷特别严重
IE8 不支持 calc()，且对 overflow: hidden 的 BFC 触发有边界条件（比如父容器没设 zoom: 1 就可能失效）。
- 父容器必须清除浮动：加
zoom: 1（触发 hasLayout） +*overflow: hidden（IE7/8 hack） - 左栏末尾补
<div style="clear: both"></div>是临时方案，但语义差；更稳的是父容器用:after伪元素清除（IE8 支持） - 右栏避免设
height，否则内容超出会溢出；宁可用min-height
现代项目还该用 float 做两栏吗
不该。float 本意是图文环绕，强行用于布局是历史妥协。现在 display: flex 或 display: grid 更直观、可维护、少陷阱。
比如同样效果，Flex 只需：
.container { display: flex; }
.left { width: 200px; }
.right { flex: 1; }但如果你在维护老系统、要兼容 IE9 以下，或者 CSS-in-JS 里动态注入样式受限制，那 float + BFC 还是得会——只是别把它当首选。
最易被忽略的一点：float 布局中，所有参与栏都要在 DOM 顺序里“左栏优先”，否则右栏先渲染就彻底乱套；这个约束在 Flex/Grid 里不存在。
