给 span 设置 float 会彻底改变其行为：它可设宽高、脱离文档流并浮动排列，但引发父容器塌陷和文本环绕；现代布局更推荐 flex 或 grid。
给 span 设置 float 会彻底改变它的行为：它不再受行内元素限制，能设置宽高、脱离文档流、参与浮动排列，但同时会引发父容器塌陷和文本环绕等连锁反应。
浮动让 span 能设宽高、脱离行内限制
span 默认是行内元素，不能直接设 width 和 height，内容多宽就多宽。一旦加了 float: left 或 right，它就“升级”为可布局的浮动元素：
- 可以自由设置宽度、高度、内外边距
- 不再被强制挤在一行内，而是按浮动方向靠边排列
- 多个浮动
span可以并排（只要父容器有足够空间） - 即使没设宽高，也会收缩包裹内容，不像块级元素默认占满父容器
浮动后 span 会脱离文档流，导致父容器塌陷
浮动元素会从标准文档流中“抽身”，父元素如果全靠浮动子元素撑开，就会失去高度，视觉上像“塌了”：
- 例如父
div里只放一个float: left的span，父容器高度可能变成0 -
解决方法不是给父元素硬设高度，而是用清除浮动（如
clear: both）、overflow: hidden或现代方案（display: flow-root）来重建 BFC - 注意：仅用
display: inline-block或vertical-align无法解决塌陷问题
浮动 span 会影响周围文本和其他内联内容
虽然 span 自己“飘起来”了，但它仍保留在文本流中——文字会自动绕开它，形成环绕效果：
立即学习“前端免费学习笔记（深入）”；
- 浮动
span左侧时，后续段落文字会从右侧开始流动，绕过它底部 - 若后面紧跟其他内联元素（如另一个
span或文字），它们会尝试贴着浮动元素边缘排列 - 这种环绕只对内联内容生效；非浮动的块级元素（如
div）则可能被遮盖或错位，需额外处理
替代方案更推荐用于现代布局
浮动本意是图文环绕，不是做整体布局。现在用 float 控制 span 多数属于“绕弯路”：
- 需要并排+设尺寸 → 改用
display: inline-block或display: flex - 需要文字环绕图片/图标 → 仍可用
float，但建议搭配shape-outside精细控制轮廓 - 需要响应式或复杂对齐 → 直接上
flex或grid，语义清晰且无塌陷烦恼
