浮动布局仅适用于文字环绕图片、维护ie8/9、邮件模板及极简内联排版；用于导航栏等现代布局会引发清除塌陷、等高拉齐等冗余hack，而flex布局天然解决这些问题。
浮动布局还在用，但只该用在它原本设计的场景里
能用，但仅限文字环绕图片、维护 IE8/9 旧系统、写邮件模板、或极简内联排版（比如一串小图标）。拿 float 做导航栏、卡片列表、表单对齐——不是跑不起来，而是你正在把“清除塌陷”“等高拉齐”“垂直居中”这些本该由布局模型解决的问题，硬塞给 CSS 工程师手动打补丁。
Flex 布局省掉的不是代码行数，是那些必须写的 hack
常见错误现象：overflow: hidden 一加，下拉菜单被裁；::after { clear: both } 写了却没配 display: table，清除根本无效；多个 .clearfix 嵌套，触发匿名表格盒，margin 合并全乱。
-
display: flex容器默认触发 BFC，父容器高度天然包裹子项，背景色、边框、后续内容全不会上移 -
align-items: center一行垂直居中，不用position + transform或猜line-height - 同一行子项默认等高，不用 JS 拉齐或
padding-bottom: 9999px这类 hack -
flex-wrap: wrap自动折行，不用媒体查询 + 重置float+ 重新清除
混用 float 和 flex 是真实项目里最常踩的坑
老项目迁移时，常有人给容器加了 display: flex，但子项还留着 float: left。浏览器会先处理 float，再套 flex 规则，结果不可控：部分子项错位、压缩、不参与伸缩。
- 必须显式重置：
.container > * { float: none; }，不能指望“它反正不起作用”就放着不管 - IE10/11 需补
-ms-flex: 1，否则flex: 1不生效，但残留的float仍会干扰渲染 - 浮动区块后面紧跟 flex 容器时，记得加
clear: both或overflow: hidden隔离，否则位置可能偏移
低端设备上 Flex 并不慢，但滥用就会卡
很多人以为 float “简单所以快”，实际在低端 Android WebView 或旧版 Safari 上，float 更容易因重排频繁而掉帧。Flex 主轴计算更高效，但有三个关键点必须设：
-
flex-wrap: wrap—— 不写这句，子项宁可横向溢出也不换行，小屏直接白屏 -
align-items: flex-start—— 默认stretch会反复测量长文本项高度，拖慢首屏 -
min-width: 0在容器上 —— 防止内部图片或长单词把容器无限撑宽，触发横向滚动和重绘
真正难的不是“怎么清浮动”，而是意识到：当你要做的是导航栏、卡片列表、表单对齐、响应式栅格这类通用布局时，float 已经不是解法，而是问题本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
