div本身不负责三栏布局，靠CSS规则驱动：必须通过flex、grid或float等外部CSS干预才能实现横向三栏，浏览器默认将div作为独占一行的块级元素处理。
div本身不负责三栏布局，靠CSS规则驱动
直接说结论：div只是语义中性的容器，它自己不会排成三栏。所谓“用div做三栏”，本质是给某个div加display: flex或display: grid，再配合适当的子元素规则。常见错误是写了三个div却没设任何CSS，结果垂直堆成一柱子。
必须明确：浏览器默认把div当块级元素处理，每个都独占一行；要让它横向并列，得靠外部CSS干预。
- 别指望
div自动识别“左/中/右”——它没有内置方位逻辑 - 嵌套过深（比如
div里套五层div）会让调试变困难，尤其JS操作DOM时容易找错节点 - 若用
float，必须处理清除浮动（如父容器加overflow: hidden），否则后续内容会塌陷
flex实现三栏：父容器设display: flex，子项用flex属性分配空间
这是目前最常用、最可控的方式。关键不在子div上写什么，而在父容器是否启用弹性布局。
典型写法：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.left, .right {
width: 200px;
}
.center {
flex: 1;
}
注意点：
-
flex: 1不是“占1份”，而是“剩余空间均分”——如果左右都是width: 200px，中间就会填满剩余宽度 - 若想让中间占两倍宽，可写
flex: 2，左右仍用flex: 1，但需去掉固定width，否则会冲突 - 别在子
div上同时用float和flex——float会让该元素脱离flex流，导致错位 -
justify-content: space-between只在主轴有足够空间时才生效；如果子项总宽超过容器，它不会压缩，而可能溢出
grid实现三栏：必须定义grid-template-columns，否则所有子项挤在第一列
Grid是二维布局，比flex更强调显式结构。很多人写了display: grid却没写列定义，结果三栏全叠在一起。
最小可用配置：
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
常见踩坑：
-
grid-template-columns: 1fr 2fr 1fr这种写法没问题，但若容器宽度太小（比如手机屏），fr单位仍会按比例分配，可能造成内容被压缩——这时应配合minmax(0, 1fr)或媒体查询 - 子项设
grid-column: 2 / 4意味着跨第2到第4条线，但如果只定义了3列（即4条线），第4条线存在；若定义的是grid-template-columns: 1fr 1fr（只有3条线），那grid-column: 2 / 4就超出范围，行为不可控 - 在grid容器里给子
div加position: absolute，它会完全脱离网格定位，变成相对于容器定位——不是你想要的“网格内绝对定位”
浮动方案还能用，但顺序和清除浮动极易出错
浮动布局现在主要用于兼容老项目或特殊场景（如图文环绕），新项目不推荐。但它确实能跑通，前提是HTML顺序和CSS配合严谨。
核心约束：
- HTML中，中间自适应的
div必须写在左右之后，例如：<div class="left"></div><div class="right"></div><div class="center"></div> - 左右分别用
float: left和float: right，中间不浮动，靠margin-left和margin-right腾出空间 - 父容器必须清除浮动，否则高度塌陷——
overflow: hidden最简单，但可能截断阴影或下拉菜单；::after伪元素清除更稳妥 - 浮动元素的
height若低于中间内容，会导致后面的内容从侧栏下方穿出——这不是bug，是浮动本意，得靠BFC（如overflow: hidden）包裹来修复
真正麻烦的不是写法，而是响应式适配：浮动在窄屏下极难优雅折行，往往要配合JavaScript重排，远不如flex或grid的flex-wrap或grid-auto-flow自然。
