float 布局仍可用但不推荐用于新项目，因其易引发父容器塌陷、响应式错乱等问题；维护老代码或需兼容IE8–9时才需掌握；现代项目首选flex或grid布局。
float 布局现在还能用吗？
能，但不推荐用于新项目。它依赖清除浮动（clear），容易引发父容器塌陷、响应式错乱等问题，尤其在嵌套或动态内容下表现不可控。
如果你维护老代码、需要兼容 IE8–9，float 仍需掌握；否则优先跳过。常见错误是只给左栏设 float: left，却忘了给右栏设 overflow: hidden 或额外的 clear 元素，导致右栏换行或重叠。
示例中右栏常被挤到下一行——这不是浏览器 bug，而是 float 的文档流脱离机制决定的：非浮动元素会“绕行”，除非它自身触发 BFC（比如加 overflow: hidden）。
flex 实现两栏布局最简写法
现代项目首选。核心就三行 CSS：display: flex + 左右容器定义宽度或伸缩行为，无需计算、无塌陷风险。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex，子元素默认水平排列 - 左栏用
flex: 0 0 200px（不缩放、不增长、固定 200px），右栏用flex: 1占满剩余空间 - 注意：如果右栏内容超长且含英文/数字无空格，可能溢出容器，需加
word-break: break-word或overflow-wrap: break-word - IE10+ 支持，但 IE10–11 对
flex-wrap和某些属性有差异，不用换行时基本安全
grid 布局做两栏更语义化
当你明确知道是“列结构”而非“弹性排列”，grid 更直观。它直接描述列宽关系，不依赖子元素顺序或伸缩逻辑。
- 父容器设
display: grid和grid-template-columns: 200px 1fr，即左列固定、右列自适应 - 支持
minmax(200px, 1fr)实现最小宽度 + 弹性分配，比 flex 更精细控制断点行为 - IE 完全不支持，Chrome/Firefox/Edge 16+ 均可放心用；若需兼容旧版 Edge（≤15），得降级为 flex
- 注意：grid 子项默认不继承父容器的
width，所以不要给子项再设width: 100%，否则可能双倍约束导致错位
为什么 table 布局不该碰？
虽然 display: table 能实现等高两栏，但它把语义和样式强耦合：HTML 结构必须模拟表格（table/tr/td），破坏可访问性（屏幕阅读器误读）、SEO 友好性差，且无法响应式断行（table-layout: fixed 下更僵硬）。
唯一合理场景：渲染真实表格数据本身。拿它做页面布局，等于用 Excel 排版 Word 文档——能跑，但改起来痛苦，协作时别人第一反应是删掉重写。
真正容易被忽略的是：所有这些方案里，**右栏的内容高度永远影响整体容器高度，但左栏不会自动拉伸对齐**——除非你显式用 align-items: stretch（flex）或 align-content: stretch（grid），或者干脆接受“左栏短、右栏长”的视觉落差。这个细节，90% 的初学者第一次调试时都会卡住几小时。
