推荐使用css grid或flexbox实现三栏布局，避免浮动；grid用grid-template-columns: 200px 1fr 240px一行定义结构，天然等高、响应式干净；flex中中间栏用flex: 1（等价于flex: 1 1 0%）确保占满剩余空间，避免flex: 1 1 auto导致溢出。
直接用 display: grid 或 display: flex，别碰 float——它不是为三栏设计的，硬用只会触发塌陷、清浮、盒模型错位、响应式失效等一系列连锁问题。
用 grid-template-columns 定义三栏最稳
一行代码定结构，语义清晰，天然等高，响应式切换也干净。
-
grid-template-columns: 200px 1fr 240px表示左栏固定 200px、中间自适应、右栏固定 240px；1fr不是百分比，而是“拿走所有剩余空间”，和flex: 1行为一致 - 想让中间栏最小宽度 300px？改用
minmax(300px, 1fr)，否则空内容时可能塌掉 - 父容器必须有高度约束（比如
min-height: 100vh），否则 Grid 不会撑开视口 - IE11 不支持
gap和1fr，真要兼容就切回 Flex，并用grid-column-gap+grid-row-gap替代gap
flex: 1 在中间栏必须写对
很多人写 flex: 1 1 auto，结果内容一多，中间栏反而缩窄甚至换行——这不是 bug，是预期行为。
-
flex: 1是简写，等价于flex: 1 1 0%，基准宽度为 0%，确保“主动占满剩余空间” -
flex: 1 1 auto的auto是按内容宽度算基准，遇到长文本或图片容易溢出 - 左右栏推荐用
flex: 0 0 200px（不放大、不缩小、固定宽），比单纯width: 200px更稳妥 - 中间栏加
min-width: 0，防止内部文字/图片强行撑宽导致布局错乱
响应式断点里最容易漏掉的两件事
小屏切单列不是只改 grid-template-columns: 1fr 就完事。
- 必须在
@media (max-width: 768px)里显式重写grid-template-columns或flex-direction: column，否则三栏还在横排挤成一团 - 如果 HTML 语义用了
<main></main>+<aside></aside>，且要求主内容优先被读屏器/搜索引擎识别，记得加order: -1给main，而不是靠 DOM 顺序硬调 - 别在 Grid/Flex 容器里混用
float或position: absolute，会直接退出布局上下文，调试时找不到原因
盒模型不统一是 90% 错位问题的根源
写了 width: 200px 却发现实际占了 220px？八成是没管 box-sizing。
- 全局加
* { box-sizing: border-box; }，否则padding: 10px+width: 200px= 实际占用 220px -
gap比margin更可靠：它不塌陷、不干扰 flex/grid 的空间分配逻辑，且在 Grid 和 Flex 中都可用 - 所有参与栅格计算的元素（如
.left、.center）不要直接加margin控制间距，该用gap就用gap
真正难处理的从来不是“怎么写出来”，而是“改需求时还能不能快速对齐逻辑”——Grid 的列定义、Flex 的伸缩规则、语义标签的嵌套层级，这三者一旦混用或错位，后续每次加 padding、换字体、调断点都会变成排查游戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
