float会强制元素按块级盒（block-level box）渲染，完全忽略display声明；其本质是脱离文档流并支持完整盒模型，故width/height、上下margin均生效，且不兼容inline-block或flex。
float 会让元素被当作 block-level 元素处理
这不是“看起来像”或“模拟成”，而是 CSS 规范明确定义的行为：当 float 值为 left 或 right 时，该元素**在布局计算中被强制视为块级元素（block-level）**，其原本的 display 值（如 inline）被忽略。这意味着它获得块级盒子的核心能力——可以显式设置 width、height、margin、padding，且这些值会真实参与盒模型计算。
注意：这和 display: inline-block 不同——后者仍是行内级（inline-level）盒子，只是具备部分块级特性；而浮动元素是彻底脱离行内上下文，进入块级布局流程。
为什么不用 display: inline-block 而用 float？
历史兼容性是关键原因。早期 IE6/7 对 display: inline-block 支持极差（仅对原生行内元素生效，且有 2–3px 垂直间隙 bug），而 float 在所有浏览器中都能稳定触发“可设宽高”行为。即使今天，某些旧项目或需要精确控制基线对齐的场景下，开发者仍倾向用 float 避免 inline-block 的空白字符问题。
-
float后元素不占整行，但也不受父容器文本流约束 -
inline-block仍受父容器font-size和换行符影响，产生不可控间隙 - 两者都需处理父容器塌陷，但
float的清除方式（如::after伪元素）更成熟
浮动后宽高计算的实际表现
浮动元素的宽高遵循标准盒模型，但初始尺寸逻辑变了：
- 未设
width时：行内元素浮动后不再“由文字撑开”，而是收缩到内容最小宽度（类似fit-content） - 未设
height时：高度仍由内容撑开，但如果子元素也浮动且未清除，父容器可能高度塌陷为 0 -
box-sizing依然生效：border-box下设置的width包含padding和border - 外边距不折叠（
margin-collapse失效），四个方向margin都可独立设置
现代开发中是否还该用 float 实现宽高控制？
绝大多数情况下不该。Flexbox 和 Grid 已成为主流布局方案，它们原生支持任意元素（包括行内元素）按需分配空间、设置尺寸，且无塌陷、无清除负担。只有两种情况值得保留 float：
- 需要文字环绕图片等经典图文混排场景（
float: left+ 普通段落流） - 维护老项目，且已形成稳定的浮动+清除模式（如 BFC 触发、伪元素清除）
真正容易被忽略的是：浮动不是“让行内元素变灵活”的通用技巧，而是一个有明确副作用的布局逃逸机制——它破坏文档流、影响兄弟元素定位、必须配套清除逻辑。一旦误用于非环绕类需求，后续维护成本远高于初期那点“能设宽高”的便利。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
