三栏布局首选flex，父容器设display: flex，子元素用flex: 1等宽或flex: 2 1 200px不等宽，配合gap控制间距；grid适用于有行列层级的场景，如顶部导航+左右内容，用grid-template-columns: 1fr 1fr 1fr；均弃用float。
用 display: flex 布局三栏最稳
直接上手就用 flex，别碰 float 或老旧的 table 布局。现代浏览器全支持，响应式也容易加。
常见错误是给子容器设了 width: 33.333% 还硬加 border 或 padding，结果溢出或换行——flex 自动处理尺寸分配，根本不用算百分比。
- 父容器加
display: flex，三块子元素默认横向排列 - 用
flex: 1让三块等宽（内容不撑开时）；想不等宽就写flex: 2 1 200px这类组合 - 加
gap: 1rem控制间距，比手动 margin 更干净，不会影响 flex 计算 - 如果中间块要固定宽度（比如侧边栏），直接设
width: 240px，左右两块用flex: 1自适应
grid 适合明确行列结构的三块划分
当三块不是简单横排，而是有上下关系（比如顶部导航 + 左右主次内容），grid 更直观，代码也更贴近“分成三块”的直觉。
容易踩的坑是只写 grid-template-columns: 1fr 1fr 1fr，却忘了设 grid-template-rows 或 minmax()，导致高度塌陷或滚动异常。
立即学习“前端免费学习笔记（深入）”；
- 三列等宽：父容器加
display: grid和grid-template-columns: 1fr 1fr 1fr - 要留间隙，优先用
gap而非margin，避免触发grid的隐式轨道计算 - 如果某块要跨列（比如标题横跨三栏），用
grid-column: 1 / -1 - IE 不支持
grid（哪怕加前缀也靠不住），真要兼容 IE 就只能切回flex或 JS 补丁
别用 float，现在没理由再碰它
有人翻旧教程看到 float: left，一试发现要清浮动、父容器塌陷、响应式改起来像拆弹——这些全是历史包袱，HTML5 时代不该出现。
真实场景中，只要遇到 overflow: hidden、zoom: 1、::after { content: "" } 这类补丁写法，基本就是掉进 float 坑里了。
-
float本质是为文字环绕图片设计的，不是布局工具 - 即使加上
display: block和各种 hack，也无法可靠实现等高、自适应、垂直居中 - 所有现代 CSS 布局方案（
flex、grid、甚至position: sticky）都比它更可控
响应式断点下三块怎么变两块或一块
不是加个 @media 把 flex-direction 改成 column 就完事。关键在“何时变”和“怎么变才不闪跳”。
典型问题是小屏下三块堆成一列，但中间那块内容多，把左右两块挤得极窄，或者高度差异大导致视觉割裂。
- 用
min-width而非max-width定义断点，逻辑更清晰（比如@media (min-width: 768px)表示“≥768px 才三栏”） - 小屏时优先隐藏非核心块（如用
display: none配合aria-hidden），别硬塞进一列 - 如果必须堆叠，给每块加
width: 100%和box-sizing: border-box，防止 padding/border 溢出 - 用
flex-wrap: wrap+flex-basis可以让三块在中屏变成 2+1 排列，比一刀切更自然
flex 和 grid 的选择往往取决于你心里那张“三块怎么放”的草图——是纯横向并列，还是带层级？一旦定下，后续加动画、适配、可访问性都跟着走。别为了“用新技术”而换方案，但也别因为“以前这么写过”就卡在 float 里。 
