css浮动使元素脱离文档流并左/右排列，常用于多列布局和文字环绕，但会导致父容器高度塌陷；清除浮动推荐伪元素法，现代布局更宜用flexbox或grid。
不会让行内元素“失效”，但会让它行为彻底变成块级——可设宽高、脱离文本流、影响周围文字排版，display 计算值却可能还是 inline。
float 会让 span/a 等行内元素获得块级能力
给 <span></span> 或 <a></a> 加 float: left 后，它就能自由设置 width、height、margin-top、padding-bottom，不再被限制在一行内。这不是浏览器“改了 display 值”，而是浮动触发了块化渲染机制。
- 原本不能设宽高的
span，加float后立刻可以——别再以为是 display 没生效，问题就在 float 本身 - 多个浮动的
span会左对齐并排，中间无空隙（不像display: inline-block那样受换行符影响） - 父容器若只靠这些浮动
span帆撑高，就会塌陷——必须用clear、overflow: hidden或display: flow-root来重建 BFC
float 后的行内元素仍参与文本环绕，但会“盖住”块级元素
float 不会让行内元素消失或不可见，反而让它和周围文本产生互动：文字会绕着它流动，但非浮动的 div 会被它遮挡或错位。
- 浮动
span左侧时，后续段落文字从右侧开始，绕过其底部——这是典型文本环绕效果 - 浮动元素对块级兄弟元素“视而不见”：它们会忽略浮动元素的位置，可能被覆盖或错位
-
clear只作用于后续兄弟元素，对已浮动的span本身无效；想让它回归正常流，必须显式写float: none
float 和 flex 容器混用会直接退出 Flex 布局
如果一个 span 是 display: flex 容器的子元素，再加 float，它就不再是 Flex 项目，justify-content、align-items 全部失效。
- CSS 规范明确要求：浮动子元素的
display被重置为block，并脱离 Flex formatting context - 常见现象：
justify-content: center对加了float: right的子项完全没反应，它还是贴右上角 - 不同浏览器渲染结果可能不一致——Chrome 可能挤到下一行，Safari 可能重叠在其他项目上，调试时容易误判为 Flex 写错
真正难处理的不是 float 本身，而是它和周围环境的耦合：父容器塌陷、文本环绕、与 flex/grid 冲突、清除方式选错导致裁剪或伪元素不可见。这些都不是孤立 bug，而是浮动机制在不同上下文中的必然表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
