结论：float 实现两列布局已不推荐，应优先使用 flex 或 grid；因 float 本为图文环绕设计，强行布局会导致塌陷、需清浮、响应差、IE bug 等问题。
直接说结论：用 float 实现两列布局在现代 CSS 中已不推荐，但理解它对排查老项目或兼容 IE8–9 仍有实际价值；真正该用的是 display: flex 或 display: grid。
为什么 float 不再是首选
浮动本意是让文字环绕图片，不是为布局设计。强行用 float 做两列会引发一系列副作用：
-
float元素脱离文档流，父容器高度塌陷（常见表现：背景色/边框消失） - 必须手动清除浮动（
clear: both），否则后续元素位置错乱 - 响应式适配困难，
float对min-width、max-width等约束支持弱 - IE6–7 中存在双倍边距 bug（
float元素加margin-left或margin-right会翻倍）
如果非要用 float，怎么写才不出错
核心就三点：设宽、浮动、清浮。假设左栏固定 200px，右栏自适应：
.container {
/* 必须给父容器触发 BFC，避免高度塌陷 */
overflow: hidden; /* 或使用 display: flow-root */
}
.left {
float: left;
width: 200px;
}
.right {
float: left;
width: calc(100% - 200px);
}
注意：width 必须显式设置，float 不会自动分配剩余空间；.right 不能用 margin-left: 200px 模拟，否则在窄屏下会换行。
更靠谱的替代方案：用 flex 一行搞定
现代浏览器中，display: flex 是两列布局最稳的选择，无需清除、无塌陷、天然支持响应式：
.container {
display: flex;
}
.left {
flex: 0 0 200px; /* 不缩放、不增长、固定宽 */
}
.right {
flex: 1; /* 占满剩余空间 */
}
关键点：
-
flex: 0 0 200px比单纯写width: 200px更安全，能防止内容撑开导致溢出 - 若需左栏自适应、右栏固定，把
flex值对调即可 - 加
flex-wrap: wrap和媒体查询，就能自然退化为单列（移动端）
什么时候该上 grid
当两列之间有复杂对齐、跨行/跨列需求，或者需要定义明确的网格轨道时，display: grid 更清晰：
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
}
注意：grid 在 IE 中完全不支持（哪怕加前缀），所以如果项目还要兼容 IE11，得 fallback 到 flex；而 flex 的 IE10+ 支持度足够日常使用。
真正容易被忽略的是盒模型本身的影响——无论用哪种方式，box-sizing: border-box 必须全局设置，否则 padding 和 border 会让宽度计算出错，尤其在 flex 中容易导致换行或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
