现代开发中不推荐用 float 实现分栏，因其易导致父容器高度塌陷、清除浮动成本高、响应式适配困难；应优先选用 flexbox 或 grid。
float分栏为什么现在不推荐用
纯靠 float 实现分栏在现代开发中属于过时方案，浏览器兼容性虽好，但会引发父容器高度塌陷、清除浮动成本高、响应式难适配等问题。除非维护老项目或需兼容 IE8 及更早版本，否则应优先选 flexbox 或 grid。
float分栏必须同时设置width和float
只设 float: left 不设 width，元素会尽可能撑满内容宽度，无法形成并排效果；反过来，只设 width 不设 float，元素仍按文档流垂直堆叠。
-
float: left让元素脱离文档流并向左靠齐 -
width必须用具体值（如300px、50%、calc(50% - 10px)），百分比需注意父容器是否有明确宽度 - 两栏常见组合：
width: 65%+width: 35%，或width: 200px+width: calc(100% - 200px)
父容器高度塌陷是float分栏最常踩的坑
浮动元素脱离文档流后，父容器默认“看不见”它们，表现为高度为 0，背景、边框、后续兄弟元素位置都会错乱。这不是 bug，是 float 的原始设计行为。
- 临时修复：在父容器末尾加一个带
clear: both的空标签，如 - 更稳妥做法：给父容器设置
overflow: hidden或overflow: auto（注意可能触发滚动条或裁剪） - 现代写法：用伪元素清除，父容器加
::after { content: ""; display: table; clear: both; }
float分栏在响应式场景下极易失效
当视口缩小时，若子元素 width 是固定像素值（如 300px），很快就会溢出父容器；若用百分比，又容易因边距、内边距未预留空间而换行。
- 避免写死
width: 300px，改用max-width+width: 100%组合 - 左右栏之间留间隙时，别只依赖
margin-right，要配合box-sizing: border-box防止总宽超 100% - 媒体查询中重置
float和width很繁琐，不如直接在断点处切换为display: flex
实际项目里，float 分栏真正能省事的地方只剩极少数：比如邮件模板（因 Outlook 等客户端对 flex 支持差），或需要精确控制图文环绕的老式 CMS 输出。其他情况，花十分钟学清楚 flex-wrap 和 grid-template-columns 更值得。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
