用 absolute 做左右分栏易错在：父容器未设 relative 导致定位失控；子元素缺 top/height 致高度为 0；脱离文档流引发高度塌陷与内容裁切。
用 position: absolute 做左右分栏容易错在哪
直接上 position: absolute 给左栏加 left: 0、右栏加 right: 0，看似简单，实际常导致内容被裁切、响应失效或父容器高度塌陷。
根本原因是 absolute 脱离文档流，父容器无法感知子元素高度；同时左右偏移若没配 top 或 height，元素可能“飘”在不可见位置。
- 必须给父容器设
position: relative，否则absolute会往上层定位上下文找，行为不可控 - 左右栏都要明确设
top和height（或bottom），否则高度为 0，内容不显示 - 如果左右栏内容高度不一致，且父容器没设高，视觉上会“错位”——不是对齐问题，是父容器压根没撑开
`.container { position: relative; height: 300px; }
.left { position: absolute; left: 0; top: 0; width: 200px; height: 100%; }
.right { position: absolute; right: 0; top: 0; width: 300px; height: 100%; }`
不用定位，靠 display: flex 更稳的写法
Flex 是目前最可靠、语义最清晰的左右分栏方案，兼容性到 IE10+，且天然支持自动等高、响应式收缩。
关键不在“怎么写”，而在“别漏掉父容器的 display: flex 和子项的 flex 分配逻辑”。很多人写了 flex 却发现宽度不生效，其实是忘了设 flex: 0 0 auto 或 flex: 1 控制伸缩行为。
- 左栏固定宽、右栏自适应：左栏设
flex: 0 0 200px，右栏设flex: 1 - 两栏都等宽：都设
flex: 1，或用flex: 1 1 50% - 避免换行：父容器加
flex-wrap: nowrap（默认就是，但显式写更安心） - IE10/11 下
flex: 1有 bug，建议写全flex: 1 1 0%
`.container { display: flex; }
.left { flex: 0 0 200px; }
.right { flex: 1; }`
float 还能用吗？什么场景下它反而更合适
纯静态内容、需兼容 IE8 及以下的老系统，float 仍是可行解。但它不是“过时就该删”，而是“用了就得收尾”。
最大的坑不是浮动本身，是忘记清除浮动，导致后续元素错位、父容器高度塌陷。现代项目基本不用，但维护老代码时绕不开。
- 左右浮动后，父容器必须触发 BFC：可加
overflow: hidden，或伪元素::after { content: ""; display: table; clear: both; } -
float元素默认 inline-block 行为，垂直方向对齐要用vertical-align，不是align-items - 浮动元素不能设
margin-top推动自身，只能推相邻块级兄弟元素——这点极易误判为“样式没生效”
响应式断点里左右分栏突然错位？检查 min-width 和 box-sizing
不少人在媒体查询里改了 width，但忘了元素自带 padding 或 border 会让实际占用宽度超预期，尤其左右栏加了 padding 后总宽 > 100%，直接换行。
这不是布局逻辑错了，是盒模型理解偏差。CSS 默认是 content-box，width 不含内边距和边框。
- 所有参与分栏的元素，建议统一加
box-sizing: border-box - 如果用
flex，注意gap在旧浏览器不支持，替代方案是用margin，但要避开第一个/最后一个元素 - 媒体查询中修改
flex-direction: column切换为上下排列时，记得重置width和flex值，否则可能残留横向约束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
