float 布局已过时，易致父容器塌陷和错位，仅限 ie8 及以下兼容；现代推荐 flex（两行代码实现两栏）或 grid（适合复杂嵌套）。
float 布局还在用？别踩塌陷和清除浮动的老坑
用 float 实现左右布局，现在基本是历史遗留代码的维护场景。它本身不为布局设计，强行用会导致父容器高度塌陷、后续元素错位，必须手动加 clear: both 或伪元素清除——但稍一疏忽就漏掉，页面立刻错乱。
常见错误现象：div 左右分栏后，下方的 footer 跑到右侧栏底下；或者整个容器高度为 0，背景色消失。
- 只在兼容 IE8 及更老浏览器时才考虑用
float - 务必给父容器加
overflow: hidden或::after伪元素清除浮动（不是加clear在子元素上） - 避免嵌套多层
float，否则清除逻辑极易失控
flex 布局怎么写两栏？关键就两行 CSS
现代页面左右布局首选 display: flex。它天然支持对齐、伸缩、响应式，代码简洁且行为可预测。
使用场景：侧边栏 + 主内容区、表单左右标签与输入框、卡片内图标+文字等。
立即学习“前端免费学习笔记（深入）”；
雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
- 父容器设
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，别给自己留兼容包袱。
