推荐用 CSS Grid 实现三栏布局，因其简洁、语义清晰、响应式可控，HTML 顺序可自由安排；关键写法为 .container { display: grid; grid-template-columns: 200px 1fr 200px; gap: 16px; }。
直接用 display: grid，别碰 float 或 position: absolute —— 这些方案在 2026 年已无必要，除非你必须支持 IE11 以下老浏览器。
用 CSS Grid 实现三栏（推荐）
Grid 是目前最简洁、语义最清晰、响应式最可控的方式。HTML 顺序可自由安排，无需 hack，也不依赖 DOM 位置。
关键写法：
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左固定 / 中自适应 / 右固定 */
gap: 16px;
}
-
1fr表示“剩余空间均分”，不是百分比，也不是像素值，它会自动避让左右固定栏 - 若想中间栏最小宽度为 300px，改用
minmax(300px, 1fr) - 三栏等宽？直接写
1fr 1fr 1fr或repeat(3, 1fr) - 注意：父容器需有明确宽度或高度约束（如
height: 100vh），否则grid可能不按预期撑开
用 Flex 实现三栏（兼容性稍好）
Flex 也能做，但要注意：它本质是一维布局，三栏需确保所有子元素在同一行，且中间栏不能换行。
典型写法：
.container {
display: flex;
}
.left { width: 200px; }
.center { flex: 1; } /* 等价于 flex: 1 1 0% */
.right { width: 200px; }
-
flex: 1是简写，含义是「尽可能伸展，不收缩，基准宽度为 0」——这能保证中间栏填满剩余空间 - 如果中间内容过长导致溢出，加
min-width: 0防止 flex item 不收缩 - 移动端想变单列？用
@media (max-width: 768px) { .container { flex-direction: column; } } - 不要用
flex: auto，它依赖内容宽度，在某些浏览器中行为不一致
为什么别用 float 布局
浮动方案现在只剩一个真实用途：维护 10 年以上未重构的老项目。其他场景全是坑。
-
float会让元素脱离文档流，父容器高度塌陷——必须额外加clear: both或伪元素清除 - HTML 必须按「左→右→中」顺序写，否则
.center的margin得反复调，一改就错 - 响应式时，
float+width组合极易导致横向滚动条意外出现 - 现代编辑器（VS Code、WebStorm）对
grid和flex的 CSS 提示完整，对float几乎不提示，调试成本更高
真正容易被忽略的点是：三栏布局里，中间栏往往承载主要内容，它的渲染优先级和可访问性（如屏幕阅读器顺序）比视觉位置更重要。Grid 和 Flex 都允许用 order 属性调整视觉顺序而不影响 DOM 顺序，而浮动和绝对定位做不到这点——别为了“看起来对”牺牲语义结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
