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 溢出……这些地方最容易露馅。