float + overflow: hidden 在2026年仍可用但仅推荐兼容IE9–11的老系统；新项目应优先使用flex或grid，因其更简洁可靠且无需处理BFC、塌陷等浮动固有问题。
直接说结论：float + overflow: hidden 这套组合在 2026 年仍能用，但只推荐用于需要兼容 IE9–11 的老后台系统；新项目请优先选 flex 或 grid。
为什么右栏必须加 overflow: hidden？
左栏设了 float: left 后就脱离文档流，右栏默认仍从父容器顶部开始渲染，文字会直接叠在左栏上——这不是“没写对”，而是浏览器本就该这么干。
overflow: hidden 的作用不是隐藏内容，是强制右栏生成 BFC（块级格式化上下文），让它在布局阶段就主动避开左栏浮动区域。这是最轻量、最可靠的触发方式。
-
overflow: auto也能触发 BFC，但内容略超宽时可能意外出现滚动条 -
display: flow-root语义更干净，但 IE 完全不支持 -
clear: both只解决父容器塌陷，不解决右栏“看不见左栏”的问题
float 布局的三个硬性条件缺一不可
漏掉任意一条，就会错位、塌陷或重叠——不是 CSS 写错了，是条件没凑齐。
立即学习“前端免费学习笔记（深入）”；
- 左栏必须设明确宽度，如
width: 200px；用百分比时注意父容器padding会影响实际可用宽度 - 左栏必须写
float: left（不能是right，否则右栏逻辑要重写） - 父容器必须清除浮动，推荐
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; }
右栏常见错误写法与修正
很多人以为加个 margin-left: 200px 就完事，结果右栏被挤到下一行——本质是没理解“避让”靠的是 BFC，不是靠留空。
- ❌ 错误：右栏也加
float: right→ 两栏都脱离文档流，右栏贴右边界，中间留白 - ❌ 错误：右栏用
width: calc(100% - 200px)却没配 BFC →calc生效，但避让逻辑失效，内容仍可能被左栏遮挡 - ✅ 正确：右栏设
overflow: hidden（或display: flow-root），再配合width: calc(100% - 200px)实现响应式填满（IE9+ 支持）
HTML 结构顺序不能颠倒
浮动依赖渲染顺序。如果把右栏写在 HTML 前面，它先渲染、占据整行，再渲染的左栏浮动元素会被“挤”到下一行——布局彻底失效。
必须保证 HTML 中左栏在前、右栏在后，且父容器包裹两者。这个细节在调试时经常被忽略，但它是整个布局能成立的前提。
