现代三栏布局应优先使用 flex 或 grid：flex 用 flex: 1 让中间栏主动占满剩余空间，grid 用 1fr 实现等效效果；二者均避免 float 带来的塌陷、清浮、响应式等维护问题，并支持语义化 dom 顺序与视觉顺序分离。
现代项目里，直接用 display: flex 或 display: grid 实现三栏布局，别碰 float ——它不是布局工具，是为文字环绕图片设计的，硬用来做三栏，后续清浮动、塌陷、等高、响应式全是坑。
用 Flex 实现左右固定+中间自适应
这是最常用、最稳的场景：左导航 200px、右工具栏 240px、中间内容自适应。关键不是算百分比，而是让中间栏“主动让出空间”。
- 父容器必须设
display: flex，子元素默认水平排列 - 左右栏直接写
width: 200px（或flex: 0 0 200px），锁定尺寸不伸缩 - 中间栏用
flex: 1，不是flex: 1 1 auto——前者明确表示“拿走所有剩余空间”，后者在内容撑大时可能意外缩放 - 加
gap: 12px控制间距，别用margin，否则会干扰 flex 的空间分配逻辑
.container { display: flex; gap: 12px; }
.left { width: 200px; }
.right { width: 240px; }
.center { flex: 1; }
用 Grid 实现语义清晰的三列结构
当三栏有明确行列层级（比如顶部导航 + 左侧菜单 + 主内容区），Grid 比 Flex 更贴近“结构即代码”的直觉。但别只写 grid-template-columns 就完事。
- 用
grid-template-columns: 200px 1fr 240px定义三列，1fr不是“1份”，而是“剩余空间均分单位”，和flex: 1行为一致 - 如果中间内容区需要最小高度（比如要撑满视口），得配
minmax(0, 1fr)或显式设grid-template-rows: 1fr，否则空内容时高度塌陷 -
gap同样适用，且不会像 margin 那样触发隐式网格线创建 - IE11 虽支持部分 Grid（带
-ms-前缀），但1fr和gap不兼容，真要保 IE 就切回 Flex
为什么 float 布局现在基本等于自找麻烦
看到老教程里 float: left + margin + ::after 清浮动，基本可以判定这套方案已过时。问题不在“能不能跑”，而在维护成本。
-
float元素脱离文档流，父容器高度塌陷是常态，必须手动补overflow: hidden、zoom: 1或伪元素清除——这些全是 hack，不是解法 - DOM 顺序必须是左→右→中，否则
margin值要重调；而语义化要求通常是“主内容优先”，Flex 的order属性能天然解决 - 加个
border或padding就可能换行，因为width不含盒模型增量，而 Flex/Grid 默认用box-sizing: border-box - 响应式下改
flex-direction: column一行搞定，float 方案得重写整套 margin 和清除逻辑
容易被忽略的细节：HTML 结构顺序与可访问性
视觉上三栏并排，不代表 HTML 里也得按左-中-右写。屏幕阅读器读取顺序依赖 DOM 流，所以主内容应该放在 HTML 前面。
- Flex 下用
order调整视觉位置：.center { order: 1; }、.left { order: 0; }、.right { order: 2; }，不影响语义流 - Grid 下用
grid-column定位更直观，比如.center { grid-column: 2; } - 千万别为了视觉顺序把
<main></main>塞到最后——SEO 和无障碍都会受损
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
