用 display: flex 实现左右分栏最简可靠，父容器设 display: flex，左栏 flex: 0 0 240px，右栏 flex: 1；避免 float 带来的塌陷、等高、响应式重写等问题，且天然支持 column 堆叠适配移动端。
直接用 display: flex 就行，别碰 float，也别一上来就写 grid——新手容易卡在清除浮动、BFC、轨道定义这些概念里，反而连“左栏固定 240px、右栏占满”都调不出来。
为什么不用 float 做左右分栏
不是它不能用，而是你刚写完 float: left，马上就得处理父容器塌陷：要么加 overflow: hidden（可能裁掉阴影或下拉菜单），要么插个 <div class="clear"></div>（多一行没意义的 HTML）。更麻烦的是，一旦内容高度不一致，左右背景色就对不齐；小屏切单列时，所有 float 规则得重写。
- 右栏莫名换到下一行？大概率是忘了触发 BFC，比如漏了
overflow: hidden或display: flow-root - 左栏文字被压缩成一团？
width: 240px在浮动下不阻止收缩，得靠min-width补救，但效果不稳定 - 想让右栏随内容撑高，左栏却没跟着拉长？
float天然脱离文档流，等高得靠 JS 或 hack 技巧
flex 实现左右分栏最简三步法
只要父容器加 display: flex，左栏设固定宽且禁缩放，右栏设弹性伸展，就稳了。所有现代浏览器（IE10+）都支持，代码少、逻辑直、响应式友好。
- 父容器必须写
display: flex，别只给子元素加 —— 否则无效 - 左栏推荐写
flex: 0 0 240px（不增长、不收缩、基础宽 240px），比单纯width: 240px更防挤压 - 右栏写
flex: 1，它会自动占满剩余空间；如果怕内容太窄，再加min-width: 300px - 别给右栏设
width，否则和flex冲突，宽度计算会出错
右栏内容超长时的实际坑点
右栏文字或代码块里有连续无空格字符串（比如长 URL、Base64、JSON key），默认不会折行，直接溢出容器——这不是布局错了，是 CSS 默认行为。
立即学习“前端免费学习笔记（深入）”；
- 加
word-break: break-word或overflow-wrap: break-word可强制折行 - 如果右栏里有
<pre>或<code>，它们默认white-space: pre，得单独设white-space: pre-wrap - 左栏高度不会自动匹配右栏——这是正常现象；若需等高，确保父容器没覆盖
align-items: stretch（它是 flex 默认值）
移动端适配只需一行媒体查询
小屏下左右并排太挤，改成上下堆叠就行。不需要改 HTML 结构，也不用重写整个布局逻辑。
- 加一条
@media (max-width: 768px) { .container { flex-direction: column; } } - 左栏可加
display: none隐藏（比如侧边导航），右栏会自动占满整行 - 别用
float做响应式切换——它没有flex-direction这种语义化控制，切单列要全盘重写
真正卡新手的从来不是“怎么写”，而是“为什么写了没反应”。多数时候是父容器漏了 display: flex，或者右栏误加了 width 跟 flex 打架，又或者用了 column-count 却套在 flex 容器里——后者根本不会生效，因为分栏规则和弹性布局互斥。
