浮动两列布局易塌陷因父容器无法计算浮动子元素高度，需用.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。真正难的不是怎么清浮动，而是判断什么时候该放弃它——尤其当父容器需要响应式、内部要居中、或者要动态增删列时，浮动立刻变成技术债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
