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，所有后续兄弟元素默认会绕排——哪怕你只想要两栏，后面跟一个 ，它也会试图贴着浮动元素边缘显示，除非显式 clear: both。
