float会强制触发块级化，使元素计算display值变为block（或table），可设宽高和四向margin；即使原始为inline元素，computed style中display也显示为block。
float会强制触发块级化（blockification）
设置 float: left 或 float: right 后，元素的计算 display 值会自动变成 block（或 table，取决于原始类型），哪怕它原本是 inline、inline-block 甚至 span。这不是浏览器“猜测”，而是 CSS 规范明确定义的行为：浮动元素必须能接受宽高、内外边距等块级属性，因此必须具备块级盒模型。
为什么必须块级化才能浮动
浮动的本质是让元素脱离正常文档流的垂直排列，但又需在水平方向上“停靠”到容器边缘或相邻浮动元素旁——这个“停靠”动作需要明确的盒尺寸和边界。行内元素（如 span）没有固有宽度、不能设 width/height、上下 margin 无效，根本无法参与这种定位逻辑。
-
inline元素设float后，立刻获得display: block行为：可设宽高、四向margin、padding全部生效 -
inline-block元素设float后，display计算值仍为block，但原有行内布局特性（如换行空白）不再起作用 - 表格相关元素（如
td）浮动后可能变为table，同样是为了保有结构化盒模型
常见误解与实际表现
很多人以为“只是看起来像块级”，其实它是真·块级化：开发者工具里能看到 Computed 面板中 display 明确显示为 block，且所有块级样式规则都开始生效。这也是为什么浮动后能用 margin 精确控制间距，而纯 inline 元素做不到。
- 错误写法：
span { float: left; width: 100px; }在没浮动前会失效，加了float就立刻生效 - 陷阱点：如果同时写了
display: inline和float: left，后者优先级更高，display被覆盖 - 兼容性无风险：该行为自 CSS2.1 起就稳定存在，所有现代浏览器一致
不块级化会导致什么问题
如果不强制块级化，浮动将无法定义“外边缘碰到哪”的边界。比如一个 span 浮动后若仍保持行内行为，它的宽度随文字伸缩、上下 margin 折叠、无法设定固定尺寸——那它根本没法可靠地“靠左停住”或“给文字留出环绕空间”。图文环绕这个核心场景，从第一天起就依赖这个块级化保证。
真正容易被忽略的是：这个转换不可逆，也无需手动干预；你不需要也不应该再写 display: block 来“补救”，那是多余且可能干扰后续样式的操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
