Float 布局已过时，易致父容器塌陷和错位，仅限 ie8 及以下兼容；现代推荐 flex（两行代码实现两栏）或 grid（适合复杂嵌套）。
float 布局还在用？别踩塌陷和清除浮动的老坑
用 float 实现左右布局，现在基本是历史遗留代码的维护场景。它本身不为布局设计，强行用会导致父容器高度塌陷、后续元素错位，必须手动加 clear: both 或伪元素清除——但稍一疏忽就漏掉，页面立刻错乱。
常见错误现象：div 左右分栏后，下方的 footer 跑到右侧栏底下；或者整个容器高度为 0，背景色消失。
- 只在兼容 IE8 及更老浏览器时才考虑用
float - 务必给父容器加
overflow: hidden或::after伪元素清除浮动（不是加clear在子元素上） - 避免嵌套多层
float，否则清除逻辑极易失控
flex 布局怎么写两栏？关键就两行 CSS
现代页面左右布局首选 display: flex。它天然支持对齐、伸缩、响应式，代码简洁且行为可预测。
使用场景：侧边栏 + 主内容区、表单左右标签与输入框、卡片内图标+文字等。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子元素默认横向排列 - 控制宽度用
flex: 1（自动占剩余空间）或固定width（如width: 200px） - 注意
flex-wrap: nowrap是默认值，不用额外写；想换行才加 - IE10+ 支持，但 IE10/11 对某些
flex属性有 bug（比如flex: 1在 IE 中需写全flex: 1 1 auto）
示例：
.container { display: flex; } .sidebar { width: 240px; } .main { flex: 1; }grid 布局写左右结构，适合复杂嵌套或固定列宽需求
当左右不只是简单两栏，比如左侧要再分上下两块、右侧需要网格对齐多个卡片，display: grid 更直接。
性能影响几乎可忽略，但 safari 旧版本（
- 用
grid-template-columns: 240px 1fr明确定义左右宽度关系 - 避免滥用
grid-column-start/end，简单左右布局不需要显式定位 - 如果右侧内容高度变化大，注意
grid-auto-rows不会影响已有列高，父容器仍需处理高度撑开
示例：
.container { display: grid; grid-template-columns: 240px 1fr; } .sidebar { grid-column: 1; } .main { grid-column: 2; }为什么不用 inline-block？它比 float 还难调
display: inline-block 表面看能左右排，但实际会因 html 换行/空格产生不可控间隙，且垂直对齐默认按基线（baseline），导致左右高度不一致时错位。
常见错误现象：两个 inline-block 元素之间有几像素白缝；右侧栏莫名下沉。
- 必须把父容器字体大小设为
0，再单独给子元素设字体，才能消灭间隙 - 要加
vertical-align: top统一对齐方式，否则高度不同就错位 - 无法像 flex 或 grid 那样自动分配剩余空间，宽度计算更脆弱
真正麻烦的不是选哪种方案，而是混用：比如父容器用 flex，子元素又用 float；或者 grid 里嵌套 float 清除。这类组合一旦出问题，调试路径特别绕——建议从一开始就锁死一种布局模型，尤其新项目直接上 flex，别给自己留兼容包袱。