float两栏布局需精确控制width且总和不超过父容器宽度，否则右栏换行；父容器高度塌陷可用overflow:hidden或伪元素清除浮动；HTML顺序应与视觉顺序一致；现代开发更推荐flex或grid布局。
用 float 做两栏布局，width 必须精确控制
浮动两栏能工作，但前提是左右栏的 width 加起来不能超过父容器宽度（还得预留 margin 或 padding 的空间）。浏览器不会自动“挤一挤”，超了就会换行。
- 常见错误：左栏设
width: 70%，右栏也设width: 30%，但加了padding: 10px后实际占用超出 100%，右栏掉到下一行 - 更稳妥的做法是统一用
box-sizing: border-box，让padding和border包含在width内 - 如果父容器有
padding，子元素用width: calc(100% - 20px)这类计算值比固定百分比更可控
float 布局后父容器高度塌陷怎么破
这是浮动最经典的问题：左右栏都 float 了，父容器认为里面“没内容”，高度变成 0，后续元素直接顶上来。
- 最轻量解法：给父容器加
overflow: hidden或overflow: auto（注意可能触发滚动条或裁剪） - 语义更清晰的解法：在父容器末尾加一个清除浮动的空元素，
- 现代推荐：用伪元素清除，父容器加这段 CSS：
content: ""; display: table; clear: both;
（写在
::after里）
左右栏顺序错乱？检查 HTML 结构和 float 方向
浮动本身不改变文档流顺序，只是“贴边”。如果希望左栏在 HTML 中写在后面、却显示在左边，仅靠 float: left 是做不到的。
- 正常情况：左栏 HTML 在前 →
float: left；右栏 HTML 在后 →float: right - 如果右栏 HTML 在前、又想它靠右显示，可以给它
float: right，左栏再float: left，也能对齐——但要注意：右栏必须先渲染，否则左栏会占满整行，把右栏挤下去 - 更稳的方式是保持 HTML 顺序与视觉顺序一致，避免依赖渲染时序
为什么现在不推荐用 float 做两栏布局
不是不能用，而是容易踩坑且扩展性差。比如加个等高需求、响应式断点、垂直居中，就得堆一堆 hack。
立即学习“前端免费学习笔记（深入）”；
-
float是为文字环绕图片设计的，不是为页面布局 - 响应式时要重写
float和width，而flex或grid只需改一两个属性 - IE8+ 虽支持
float，但 IE6/7 的盒模型和浮动 bug 太多，维护成本高
如果你必须兼容老项目或特定环境，float + width 是可行的，但务必手动验证所有边界情况：窄屏、大字体、缩放 200%、输入框聚焦时的 outline 溢出……这些地方最容易露馅。