float 会让 display 计算值强制变为 block：无论原 display 值为 inline、inline-block 等，只要 float 不为 none，浏览器即按规范将其计算 display 值转为 block，且 vertical-align、font-size:0 等行内特性失效。
float 会让 display 计算值强制变为 block
当你给一个原本是 inline 或 inline-block 的元素设置 float: left（或 right），浏览器会**忽略你写的 display 值**，直接按规范将其“块级化”——即计算后的 display 值在 devtools 中显示为 block（哪怕你写的是 display: inline-block）。这不是 bug，而是 CSS 规范明确要求的行为。
VSCode 或浏览器开发者工具常提示：inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'。这句话说清了本质：浮动优先级高于 display 声明。
为什么 display:block 本身不等于“会浮动”
display: block 只控制元素的盒模型类型和参与格式化上下文的方式；它**不改变文档流地位**——block 元素仍占据正常流位置、撑高父容器、受 margin 合并影响。
而 float 是一个独立的定位机制，它强制元素：
- 脱离标准文档流（后续兄弟块级元素会上移填补）
- 生成 BFC（可防止 margin 合并、包含浮动子项）
- 触发“块级化”（自动将 display 转为 block 或 table）
所以，display: block 是结果，float 才是原因。你看到的“浮动”，从来不是 block 带来的，而是 float 自身的布局行为。
常见错误：同时写 float 和 inline-block 还想靠 vertical-align 对齐
这是最典型的误用场景。一旦加了 float，以下属性立即失效：
-
vertical-align—— 它只对行内格式化上下文中的元素有效，浮动后已不在行框里 -
font-size: 0在父级上消除 inline-block 间隙 —— 浮动元素已脱离行框，间隙本就不存在 - 父容器对它的高度感知 —— 若无清除机制，父容器会塌陷
如果你发现两个 float: left 的盒子底部对不齐，别去调 vertical-align，那是徒劳；应该检查它们的 margin、line-height、内容高度差异，或者换用 display: flex 来真正控制对齐。
现代替代方案：什么时候该放弃 float
除非你在维护 IE8 项目，或需要文本环绕图片这种经典排版，否则 float 已不是布局首选。它带来的副作用（塌陷、清除成本、对齐不可控）远超收益。
- 多列并排 → 用
display: flex或display: grid - 响应式栅格 → 用
grid-template-columns或flex-wrap - 文字环绕图片 →
float仍是合理选择，但仅限于此单一语义
真正容易被忽略的一点是：**浮动不是“让元素左对齐”的手段，而是“让元素脱离流并允许内容环绕”的机制**。混淆这个目的，就会反复掉进 display + float + vertical-align 的三重陷阱里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
