CSS浮动两栏布局教程详解

本文深入剖析了CSS浮动（float）实现左右两栏布局的核心原理与典型陷阱：关键不在于浮动本身，而在于应对父容器塌陷、副栏换行、盒模型计算偏差及后续元素绕排等副作用；通过box-sizing: border-box或calc()精准控制宽度、采用伪元素法可靠清除浮动，并明确指出——尽管float仍可工作，但在现代前端开发中因其响应式支持薄弱、维护成本高且行为不可控，已不再推荐作为新项目的首选布局方案。

float 实现两栏布局的核心逻辑

用 float 做左右两栏，本质是让主栏和副栏脱离文档流并水平排列。关键不是“浮动本身”，而是浮动后父容器塌陷、后续元素错位这些副作用必须手动处理。

为什么 float:left + width 之后副栏掉到下一行

常见错误是没控制总宽度或忽略盒模型。浏览器计算时把 padding、border 算进宽度，导致两栏加起来超 100%。

• 主栏设 width: 70%，副栏设 width: 30%，但若都加了 padding: 10px，实际占用宽度就超出
• 解决办法：统一加 box-sizing: border-box，或者用 calc(70% - 20px) 手动扣减
• 更稳妥的做法：主栏用 float: left，副栏也 float: left（别用 right），靠顺序和宽度自然分列

清除浮动的三种可靠写法

父容器高度为 0 是最大坑，不清理就导致背景色不显示、边框失效、下方元素上移。

• 伪元素法（推荐）：在父容器加 ::after，内容为空，display: table 或 clear: both
• overflow: hidden（简单但有副作用：溢出内容被裁剪，慎用于含下拉菜单的场景）
• 额外空标签如
  （语义差，仅作临时调试）

article::after {
  content: "";
  display: table;
  clear: both;
}

float 布局在现代项目里还该用吗

能用，但不建议新项目首选。它对响应式支持弱，比如小屏下想让副栏移到主栏下方，光靠 float 很难干净实现，往往要配合 media query + 多套浮动规则，维护成本高。

真正容易被忽略的是：一旦用了 float，所有后续兄弟元素默认会绕排——哪怕你只想要两栏，后面跟一个