float两栏布局核心是让主副栏脱离文档流水平排列，但需处理父容器塌陷和后续元素错位；常见副栏换行因盒模型未重置，应设box-sizing:border-box或calc()；清除浮动推荐伪元素法；现代项目不建议首选，因响应式维护难且后续元素默认绕排。

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，所有后续兄弟元素默认会绕排——哪怕你只想要两栏，后面跟一个