现代三栏布局应使用flex或grid实现，禁用float；flex方案中父容器设display: flex，左右栏用flex: 0 0 宽度值，中间栏用flex: 1，统一用gap控制间距，并全局设置box-sizing: border-box；grid方案用grid-template-columns: 200px 1fr 240px，配合minmax(0, 1fr)防塌陷，移动端需media query切换为单列；语义标签main、nav、aside须正确嵌套，不可混用布局与语义。
现代三栏布局直接用 display: flex 或 display: grid 实现，别碰 float ——它不是为页面布局设计的，硬用只会带来塌陷、清浮、响应式错乱等一系列维护黑洞。
用 flex 实现左右固定 + 中间自适应
这是最稳、最常用、兼容性最好的方案，适用于左导航 200px、右工具栏 240px、中间内容需占满剩余空间的场景。
- 父容器必须设
display: flex，子元素默认水平排列 - 左右栏写
flex: 0 0 200px（或直接width: 200px），锁定尺寸不伸缩 - 中间栏用
flex: 1，不是flex: 1 1 auto；前者明确表示“拿走所有剩余空间”，后者在内容撑大时可能意外缩放 - 间距统一用
gap: 12px，别用margin——它会干扰 flex 的空间分配逻辑 - 全局加
* { box-sizing: border-box; }，否则width: 200px+padding: 10px实际占 220px，导致错位
用 grid 定义语义清晰的三列结构
当三栏有明确行列层级（比如顶部导航 + 左侧菜单 + 主内容区），grid 更贴近“结构即代码”的直觉，且天然等高、响应式友好。
-
grid-template-columns: 200px 1fr 240px—— 左右定宽，中间自适应；1fr不是“1份”，而是“剩余空间均分单位”，行为和flex: 1一致 - 空内容时高度塌陷？得配
minmax(0, 1fr)或显式设grid-template-rows: 1fr -
gap在 Grid 中同样可靠，IE11 不支持gap，需回退用grid-column-gap+grid-row-gap - 主内容要优先 SEO 或可访问性？加
.main { order: -1; }即可，不用改 DOM 顺序
移动端必须切单列，不能靠 flex-wrap 自动折行
flex-wrap: wrap 在三栏上基本无效——默认不换行，强行设了也容易因内容宽度失控而错位。真正可靠的方案是 media query 强制切换布局模式。
- 小屏下（如
@media (max-width: 768px)）直接改grid-template-columns: 1fr，三栏垂直堆叠 - 别用
display: block覆盖，会破坏 Grid/Flex 上下文 - Flex 场景下，小屏要重置子项：加
flex: none; width: 100%，避免flex: 1继续拉伸 - 平板断点（768px–1024px）可只隐藏一侧边栏：
.sidebar-left { display: none; }
语义化标签不能和视觉布局混用
HTML5 的 main、aside、nav 是语义标签，不是样式盒子。用错会导致屏幕阅读器误判、SEO 权重错配。
-
aside只用于与当前内容相关且可独立存在的附属信息（如文章页右侧的「作者简介」「延伸阅读」）；全站导航必须用nav -
main必须和aside、nav同级，严禁包在header、footer或aside内部 -
section不是布局容器，必须自带h2或更高阶标题，且有明确主题；三栏外层该用div或直接设display: grid在body上 - Flex/Grid 布局不影响语义——用
display: flex把nav、main、aside拉成一行完全没问题，但别为了省事把aside塞进main里
真正麻烦的不是写法本身，而是混合不同布局逻辑：比如在 Grid 容器里给子项加 float，或在 Flex 里用 calc() 算宽度却不加 min-width: 0——这些细节漏掉一个，调试时间就远超重写成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
