CSS两列布局：盒模型与浮动技巧

本文深入剖析了CSS两列布局的演进与实践：明确指出float已因文档流脱离、高度塌陷、清浮繁琐、响应式乏力及IE兼容问题而不再推荐用于现代布局，仅保留在维护老项目或兼容IE8–9时的实用价值；重点推荐flex——简洁可靠、天然响应、无需清浮，一行display: flex即可优雅实现固定+自适应列；当布局需求升级至复杂对齐、跨行跨列时，grid则以声明式轨道定义提供更高维度的控制力；最后强调box-sizing: border-box作为底层基石，是避免宽度计算失准、确保所有布局方案稳定运行的隐形关键。

直接说结论：用 float 实现两列布局在现代 CSS 中已不推荐，但理解它对排查老项目或兼容 IE8–9 仍有实际价值；真正该用的是 display: flex 或 display: grid。

为什么 float 不再是首选

浮动本意是让文字环绕图片，不是为布局设计。强行用 float 做两列会引发一系列副作用：

• float 元素脱离文档流，父容器高度塌陷（常见表现：背景色/边框消失）
• 必须手动清除浮动（clear: both），否则后续元素位置错乱
• 响应式适配困难，float 对 min-width、max-width 等约束支持弱
• IE6–7 中存在双倍边距 bug（float 元素加 margin-left 或 margin-right 会翻倍）

如果非要用 float，怎么写才不出错

核心就三点：设宽、浮动、清浮。假设左栏固定 200px，右栏自适应：

.container {
  /* 必须给父容器触发 BFC，避免高度塌陷 */
  overflow: hidden; /* 或使用 display: flow-root */
}
.left {
  float: left;
  width: 200px;
}
.right {
  float: left;
  width: calc(100% - 200px);
}

注意：width 必须显式设置，float 不会自动分配剩余空间；.right 不能用 margin-left: 200px 模拟，否则在窄屏下会换行。

更靠谱的替代方案：用 flex 一行搞定

现代浏览器中，display: flex 是两列布局最稳的选择，无需清除、无塌陷、天然支持响应式：

.container {
  display: flex;
}
.left {
  flex: 0 0 200px; /* 不缩放、不增长、固定宽 */
}
.right {
  flex: 1; /* 占满剩余空间 */
}

关键点：

• flex: 0 0 200px 比单纯写 width: 200px 更安全，能防止内容撑开导致溢出
• 若需左栏自适应、右栏固定，把 flex 值对调即可
• 加 flex-wrap: wrap 和媒体查询，就能自然退化为单列（移动端）

什么时候该上 grid

当两列之间有复杂对齐、跨行/跨列需求，或者需要定义明确的网格轨道时，display: grid 更清晰：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

注意：grid 在 IE 中完全不支持（哪怕加前缀），所以如果项目还要兼容 IE11，得 fallback 到 flex；而 flex 的 IE10+ 支持度足够日常使用。

真正容易被忽略的是盒模型本身的影响——无论用哪种方式，box-sizing: border-box 必须全局设置，否则 padding 和 border 会让宽度计算出错，尤其在 flex 中容易导致换行或溢出。

今天关于《CSS两列布局：盒模型与浮动技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！