浮动本质是图文环绕工具，被历史条件倒逼用于布局；它脱离文档流导致父容器塌陷，需clearfix等hack补救，响应式下更显脆弱，终被flexbox和grid取代。
浮动（float）在 CSS2 时代被广泛用于布局，不是因为它设计初衷就是干这个的，而是因为当时没有更好的替代方案——它本质上是个“文字环绕”工具，被开发者硬生生借用来实现多栏排版。
float 原本是为图文混排设计的
CSS2 规范里，float 的语义非常明确：让文本围绕某个元素（比如图片）流动。它的行为天然脱离文档流，但只影响后续内联内容的流向，不打算撑开父容器、也不负责对齐或等高。
- 当你写
img { float: left; }，浏览器立刻知道“右边的文字该绕过去” - 但如果你用它包住三列
div，父容器会高度塌陷——因为子元素已脱离正常流 - 必须手动加
clearfix或额外标签来“抢救”父容器高度
为什么开发者坚持用 float 做布局？
2000–2012 年间，float 是唯一能稳定实现“多列并排+自适应宽度”的纯 CSS 方案。其他选项更不可行：
-
position: absolute：完全脱离流，无法响应内容高度变化，维护成本爆炸 -
display: inline-block：有看不见的空白间隙，计算宽度时容易错位 - 表格布局（
table）：语义错误、嵌套深、响应式基本无解 - 正常流（Normal Flow）：块级元素只能垂直堆叠，做不了横向分栏
所以大家一边骂“清除浮动好烦”，一边继续用——因为没得选。
float 布局的硬伤在响应式场景里直接暴露
一旦需要适配不同屏幕，float 的脆弱性就非常明显：
- 媒体查询中改
float方向（比如从left改成none）容易引发重排错乱 - 等高需求靠
min-height或 JS 补救，不优雅也不可靠 - 垂直居中几乎无原生支持，得靠 hack（如
line-height、vertical-align配合table-cell） - Flexbox 出现后，
justify-content和align-items两行代码就能解决的问题，float得写七八行还未必稳
现在回头看，float 布局不是“错”，而是特定历史条件下的务实选择；真正容易被忽略的是：它的所有 workaround（清除浮动、负 margin、hack 居中）都在提醒你——这个方案已经到了能力边界。当 Grid 和 Flexbox 成为主流，放弃 float 做布局不是抛弃传统，而是不再强行让一个图文环绕工具去扛页面骨架的重担。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
