Grid 是三栏自适应首选方案，用 grid-template-columns 可设定宽+自适应布局（如 200px 1fr 300px）或等比伸缩（1fr 2fr 1fr），配合媒体查询实现响应式单列；gap 控制间距更可靠，避免 margin 塌陷。
用 display: grid 实现三栏自适应最直接
现代浏览器下，display: grid 是三栏自适应的首选方案，无需浮动、不依赖 JavaScript，一行 grid-template-columns 就能定义响应行为。
常见写法是：grid-template-columns: 200px 1fr 300px（左侧定宽、中间自适应、右侧定宽），或全用 fr 单位实现等比伸缩（如 1fr 2fr 1fr）。
- 移动端适配只需加媒体查询，比如在
@media (max-width: 768px)中改成grid-template-columns: 1fr叠成单列 - 注意不要混用
float或inline-block，会破坏 Grid 布局上下文 -
grid-gap（或gap）比margin更可靠控制栏间距，避免外边距塌陷问题
Flexbox 三栏也能做，但要注意 flex-wrap 和断点处理
如果项目需兼容较老版本 Safari（display: flex 仍是稳妥选择，但默认不换行，三栏会溢出容器。
关键点在于：父容器设 display: flex，子项用 flex: 0 1 300px（不放大、可缩小、基准宽 300px），再配合 min-width: 0 防止内容撑破。
立即学习“前端免费学习笔记（深入）”；
- 必须给父容器设置
flex-wrap: wrap才能在窄屏时换行，否则需靠媒体查询强制改flex-direction: column - IE11 对
flex: 1解析有偏差，建议显式写全flex: 1 1 auto - 文字过长不换行时，
word-break: break-word或overflow-wrap: break-word得手动加在内容区
width: calc() 搭配 float 是兼容性最强但最脆弱的写法
这种写法在 IE8+ 都能跑，但已不推荐新项目使用——它对盒模型极其敏感，padding、border、box-sizing 少写一个就错位。
典型结构是：左栏 float: left; width: 200px，右栏 float: right; width: 200px，中间用 margin: 0 200px 留白；或者三栏都 float: left，中间用 width: calc(100% - 400px) 计算剩余宽度。
-
calc()里加减号前后必须有空格，写成calc(100%-400px)会失效 - 浮动元素父容器必须清除浮动（
overflow: hidden或伪元素::after），否则高度塌陷 - 一旦加入
transform或position: absolute，浮动逻辑容易失效，调试成本高
别忽略 box-sizing: border-box 这个隐形开关
所有三栏方案里，只要子元素用了 padding 或 border，没设 box-sizing: border-box 就等于在埋雷——计算宽度时会把内边距和边框额外加进去，导致实际占位超预期。
建议全局重置：* { box-sizing: border-box; }，尤其在 Grid/Flex 容器内部，子项默认是 content-box，很容易让 width: 300px 实际占满 320px（含 10px padding × 2）。
- 某些 CSS 框架（如 Bootstrap 4+）已默认启用，但手写布局时极易遗漏
- Grid 的
fr单位虽不直接受影响，但若栏内嵌套了传统盒模型布局，问题仍会传导出来 - 移动端 touch 区域偏小、点击失灵，有时就是
padding被算漏后导致可点区域缩水
