float导致父容器高度塌陷是必然现象，因浮动元素脱离文档流，父容器无法感知其存在而高度归零；需用.clearfix::after或overflow:hidden补救，而flex/grid天然避免该问题。
float导致父容器高度塌陷是必然现象
只要用了float: left或float: right，父元素就“看不见”子元素了——因为浮动元素已脱离文档流。这不是bug，是float的底层机制决定的。
常见错误现象：容器背景色只显示一条细线、后续元素叠在浮动块下面、margin-bottom失效。
- 必须手动补救：加
.clearfix::after伪元素，或给父容器设overflow: hidden（但可能意外裁剪子元素） - Flex和Grid完全不用操心这事：
display: flex或display: grid自带BFC，天然包裹子项 - 如果项目里还用float做整体布局，大概率会在某次改版时漏掉清浮，导致线上错位
Grid能同时控制行和列，float只能单向滑动
float本质是“撞墙就停”的滑动行为：往左/右推，直到碰到父边界或另一个浮动元素。它不定义列数，也不管行高，更不会自动换行对齐。
使用场景对比：
- 三栏布局要适配手机屏？float得写一堆
@media+clear: both+ 调整width，稍有遗漏就错位 - Grid只需改一行：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，列数随宽度自动增减 - 想把页脚从底部移到顶部？Grid用
grid-area重命名区域就行；float得动HTML结构或硬塞负margin，极易连锁崩坏
图文环绕仍是float不可替代的唯一场景
所有现代布局方案中，只有float能让段落文字自动绕开图片——这是由浏览器渲染引擎原生支持的排版逻辑。
别试图用Grid模拟：
- 你得把每一段文字拆成独立
<p></p>，再一个个塞进不同grid-area，语义全毁 - 响应式下文字长度变化，Grid位置会错乱，而float自动重排
- 无障碍阅读器能正确读出连续段落，Grid拆分后变成多个孤立节点
所以不是“该不该淘汰float”，而是问清楚：这次要解决的是排版问题（留float），还是页面结构问题（换Grid）。
Grid声明即生效，float依赖隐式顺序和尺寸约束
Grid容器里的子元素位置由grid-column、grid-row等显式规则决定，不依赖HTML书写顺序；float则严格按DOM顺序逐个“滑入”，且每个浮动项必须明确width，否则可能撑破容器。
容易踩的坑：
- float元素没设
width：在IE或某些移动端WebView里直接占满整行，后面元素被挤到下一行 - Grid里
grid-template-areas拼错名字：浏览器静默忽略，布局直接空白，连报错都没有 - 两者性能差异不大，但Grid的CSS解析更可预测——float的渲染依赖文档流重排，复杂嵌套下偶发reflow抖动
真正麻烦的从来不是语法，而是建模逻辑：Grid是坐标系，float是滑块。选错起点，后面所有调整都在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
