浮动布局中左右栏固定间距的正确做法是左侧栏float:left、右侧栏float:right，中间区域用margin-left和margin-right显式预留间隙；错误做法包括同时设float:left和float:right导致塌陷、用padding模拟间距无效、忽略margin值需≥侧边栏宽+期望间隙。
浮动布局中左右栏固定间距的常见错误
直接给 .left 和 .right 同时设置 float: left 和 float: right，中间内容会塌陷或错位——这不是“间距”，是布局失控。浮动本身不提供间隙控制，所谓“固定间距”必须靠外边距、内边距或占位元素实现。
用 margin 在浮动侧边栏之间留白
当左右侧边栏都浮动时，中间内容区域需主动让出左右空间。最稳妥的方式是：左侧栏 float: left，右侧栏 float: right，中间区域用 margin-left 和 margin-right 显式预留间隙。
.left { width: 200px; float: left; }.right { width: 200px; float: right; }.center { margin: 0 210px; } /* 左右各留210px，比侧边栏宽多10px，形成10px间隙 */
注意：这个 margin 值必须大于等于侧边栏宽度 + 期望间隙，否则中间内容会被挤压或换行。
避免用 padding 模拟间距的陷阱
有人试图给父容器加 padding 来“撑开”左右栏，但浮动元素会脱离文档流，父容器高度塌陷，padding 对浮动子元素不产生约束作用。结果就是左右栏贴边，间隙不可控。
立即学习“前端免费学习笔记（深入）”；
- 父容器
padding只影响自身内容区，不影响已脱离流的浮动子元素位置 - 若未清除浮动（如没用
clear: both或 BFC），父容器高度为 0，视觉上更难调试 - 响应式场景下，固定
padding无法随视口缩放，易导致移动端重叠
兼容性与现代替代建议
浮动布局在 IE8+ 虽能工作，但对“固定间距”的语义支持薄弱；flex 或 grid 才真正支持间隙（gap）。如果项目还需支持旧版 IE，浮动 + margin 是唯一可行路径；否则优先用：
-
display: flex+gap: 10px（直接定义三列间统一间隙） -
display: grid+grid-template-columns: 200px 1fr 200px+gap: 10px
浮动方案里，“固定间距”本质是手动计算并硬编码的外边距，不是自动分配的间隙——这点容易被忽略，直到改宽度时才发现所有 margin 都得同步调整。
