浮动两列布局易塌陷因父容器无法计算浮动子元素高度，需用.clearfix::after触发BFC清除浮动；固定宽度下须统一box-sizing:border-box、控制总宽≤父容器且预留容错空间；现代推荐flex布局替代浮动。

浮动两列布局为什么一碰就塌

浮动本身不脱离文档流但会破坏父容器高度计算，一旦子元素全浮动，父容器高度塌陷为 0，后续内容直接顶上来。加上字体渲染差异、盒模型（box-sizing）不统一、外边距合并，哪怕写了 width: 300px，实际宽度也可能因 padding 或 border 超出预期，两列就错位或换行。

固定宽度下必须显式清除浮动

仅靠 float: left 和 float: right 不足以稳定布局，必须让父容器“感知”到浮动子元素的存在。现代写法推荐用 ::after 伪元素触发 BFC，而不是在 HTML 里硬加空标签。

• 别用 —— 语义差、冗余、易漏删
• 用 .clearfix::after 是最稳妥的兼容方案（支持 IE8+）
• 确保父容器没有 overflow: hidden 以外的隐藏溢出设置，否则可能裁剪内容

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.two-column {
  width: 960px;
  margin: 0 auto;
}
.col-left {
  float: left;
  width: 600px;
  box-sizing: border-box;
}
.col-right {
  float: right;
  width: 360px;
  box-sizing: border-box;
}

固定宽度 + 浮动的三个关键守则

宽度数字不是随便写的，它和 box-sizing、margin、padding 共同决定是否真能并排。例如：若左列设 width: 600px，但又加了 padding: 20px，默认 box-sizing: content-box 下总宽就是 640px，必然撑破容器。

• 所有浮动子元素必须统一设 box-sizing: border-box
• 两列宽度之和 ≤ 父容器宽度，且预留至少 1px 容错空间（防四舍五入误差）
• 避免给浮动元素设 margin 朝向浮动方向（如左浮动元素设 margin-left），容易引发双倍边距 bug（IE6）

更稳的替代方案其实就两行 CSS

如果项目不需要兼容 IE9 以下，直接用 display: flex，根本不用操心清除、塌陷、宽度计算：

.two-column {
  display: flex;
  width: 960px;
  margin: 0 auto;
}
.col-left {
  width: 600px;
}
.col-right {
  width: 360px;
}

浮动布局的“不稳定”，本质是拿本该由布局引擎处理的事手动 hack。真正难的不是怎么清浮动，而是判断什么时候该放弃它——尤其当父容器需要响应式、内部要居中、或者要动态增删列时，浮动立刻变成技术债。