不用float实现多栏，因其使元素脱离文档流导致父容器高度塌陷、清除浮动仅为补救而非根本解法，且响应式下易错位重叠；flexbox则天然解决撑高、等高、自适应等问题。
直接用 display: flex 就能搞定，不需要 float、position 或 JS 补丁。关键不是“会不会写”，而是“为什么这么写才不翻车”。
为什么不用 float 实现多栏？
float 会让元素脱离文档流，父容器高度塌陷是常态；清除浮动（overflow: hidden 或 ::after 伪元素）只是补救，不是解法。更麻烦的是：一旦加了 margin、padding 或响应式断点，布局极易错位甚至重叠。
- 浏览器默认不计算 float 元素撑开的父高，
.container.offsetHeight常为 0 -
float: left和float: right在同一父级下容易因顺序/宽度微小误差导致右栏换行 - 移动端 media query 中修改
width时，float 元素不会自动重排，必须额外写clear或重置float
Flexbox 左右分栏最简可靠写法
左右结构（比如左导航 200px + 右主内容自适应）只需三行 CSS，且天然支持响应式收缩：
.container {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0; /* 关键：禁止被压缩，否则窄屏下文字挤成一团 */
}
.right {
flex: 1; /* 占满剩余空间，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}
- 不要给
.right设width，否则会和flex冲突，导致宽度计算异常 -
flex-shrink: 0比min-width: 200px更稳妥——后者在 flex 容器中可能被忽略 - 如果左栏需响应式隐藏（如移动端抽屉），直接
display: none即可，.right会自动占满整行，无需改写布局逻辑
三栏等宽或不等宽的 flex 控制要点
三栏常见于「侧边栏 + 主内容 + 右工具栏」，用 flex 属性比硬写 width: 20% 更健壮：
- 等宽三栏：
.column { flex: 1; }—— 自动均分剩余空间，无视 padding/margin 干扰 - 80%/15%/5% 分配：
.main { flex: 80; }、.aside { flex: 15; }、.tools { flex: 5; }（比例关系由flex-grow决定，基数任意） - 固定左栏 + 弹性中栏 + 固定右栏：
.left { width: 240px; flex-shrink: 0; }、.center { flex: 1; }、.right { width: 80px; flex-shrink: 0; } - 注意：所有栏必须是
.container的**直接子元素**，嵌套 div 会打断 flex 作用域
容易被忽略的兼容性和行为细节
Flexbox 在现代浏览器中已无兼容性问题（Chrome 29+/Firefox 28+/Safari 6.1+），但以下几点仍常踩坑：
-
align-items: stretch是默认值，意味着所有栏高度会拉齐到最高栏——这不是 bug，是特性；若不想等高，显式设align-items: flex-start -
flex-wrap: wrap不是默认行为，多栏在窄屏下溢出时不会自动折行，得手动加 - IE10–11 对
flex: 1解析有偏差，若必须支持，改用flex: 1 1 0%或降级为flex-grow: 1单独声明 - 父容器没设
height时，align-items: center在交叉轴上可能“失效”——因为容器高度由内容撑开，没空间可居中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
