float是借位排版，仅靠副作用实现布局且需手动修复塌陷；flex是原生布局，父容器自动包裹、子项默认等高居中、响应式切换只需改flex-direction。
float 是“借位排版”，flex 是“原生布局”
浮动（float）从没打算干布局的活——它只负责让文字绕着图片走，像报纸那样。你用 float: left 把两个 div 排成一排，其实是“借用”了它的副作用：脱离文档流、触发块级格式化上下文。结果就是父容器看不见子元素高度，必须靠 overflow: hidden 或伪元素 ::after { clear: both } 手动“拉回来”。这不是布局能力，是补救手段。
Flex 布局（display: flex）一出生就为布局而生。它不脱离文档流，父容器天然包裹所有子项；主轴/交叉轴对齐语义明确；等高、居中、伸缩全是默认行为，不用 hack，也不用猜 margin。
为什么用 float 做多栏布局总在“修 bug”
常见错误现象：height: auto 的父容器塌成一条线，内容被遮挡；移动端想改成竖排，得重写 HTML 结构或加 JS 切换 class；两列中一列内容变长，另一列不跟着等高，视觉错乱。
-
float元素完全脱离标准流 → 父容器高度计算失效 -
垂直居中只能靠
line-height、position: absolute或 JS 模拟，不可靠 - 响应式切换方向需改
float+ 重设width+ 清浮动 → 维护成本指数上升 - 子项宽度必须显式设置（如
width: 33.33%），否则可能因内容撑开而错位
flex 的“默认正确”体现在哪几个关键点
不是功能多，而是多数场景下你什么都不做，它就已经是对的：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex→ 自动包裹子项，无塌陷 - 子项默认
align-items: stretch→ 天然等高，不管内容多长 -
justify-content: center+align-items: center→ 一行代码搞定水平+垂直居中 -
flex: 1→ 子项自动填满剩余空间，无需算百分比或 rem -
flex-direction: column→ 桌面横排、手机竖排，只需改一个属性
.container {
display: flex;
}
.sidebar { width: 200px; }
.main { flex: 1; } /* 不用 calc(), 不用 float, 不清浮动 */
什么时候还该用 float
不是“能不能用”，而是“该不该用”。现在还合理保留 float 的场景极少，且边界清晰：
- 富文本中图片左/右浮动 + 文字环绕（配合
shape-outside效果更自然） - 老项目里某个静态广告位，宽度固定、不参与响应逻辑，改 flex 成本远高于收益
- 极简页中几个图标左对齐，连
ul都懒得套，直接img { float: left; margin-right: 8px; }
真正容易被忽略的是：混用 float 和 flex 在同一容器里会破坏弹性上下文，导致 flex 属性失效 —— 它们不是叠加关系，是布局范式的切换。选一个，就贯彻到底。