现代三栏布局应优先使用 flex 或 grid，而非 float；因 float 本为文字环绕设计，用于布局会导致塌陷、清浮动、响应式等维护难题，而 flex/grid 语义清晰、响应灵活、维护成本低。
现代项目里，直接用 display: flex 或 display: grid 实现三栏布局，别碰 float——它不是布局工具，是为文字环绕图片设计的，硬用来做三栏，后续清浮动、塌陷、等高、响应式全是坑。
为什么 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和清除逻辑
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 + position + margin 的组合技巧，强行保持 HTML 中“主内容优先”的语义顺序。它们的实现复杂度和可维护性，远高于现代方案。
- 圣杯依赖容器
padding预留空间 + 子元素负margin+ 相对定位微调，稍一改宽高或断点就容易错位 - 双飞翼通过嵌套一层
main解决圣杯的塌陷问题，但 DOM 结构更臃肿，CSS 也更难推导 - 这两个方案在面试中可能被问及原理，但生产环境里，除非维护一个 10 年以上的老系统，否则没理由手写
- 真正该关注的是：为什么当年要绕这么大弯？答案就是——浏览器缺乏原生的、语义化的多列布局能力；现在有了，就别再绕了
复杂点在于，很多人把“能跑通”当成“该用”，却忽略了 DOM 语义、响应式扩展、团队协作成本这些隐形代价。最容易被忽略的地方是：哪怕只写一行 float，也会悄悄污染整个布局上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
