浮动使元素脱离文档流并左/右靠拢，块级元素会收缩宽度并可并排显示，行内元素则实现文字环绕，前者影响布局流，后者形成内容级环绕，典型用于图像环绕排版。
浮动（float）在CSS中主要用于让元素向左或右移动，使内容围绕它排列。它对块级元素和行内元素的影响有明显区别，主要体现在布局行为、尺寸计算和文本环绕等方面。
对块级元素的影响
当一个块级元素设置 float 后：
- 元素会脱离正常的文档流，向指定方向（左或右）靠拢，直到碰到父容器边缘或其他浮动元素。
- 原本占据的文档流空间被释放，后续的非浮动块级元素可能会“上移”并占据其原来的位置。
- 浮动后的块级元素会收缩包裹内容，即宽度不再默认占满父容器，而是根据内容自动调整（除非显式设置宽度）。
- 它仍然表现为块级特性：可以设置宽高、内外边距等。
对行内元素的影响
行内元素（如 span、a 等）在遇到浮动元素时的行为与块级元素不同：
- 行内元素不会被浮动元素推开整体位置，但会围绕浮动元素排列，形成文字环绕效果。
- 浮动元素会“侵入”行内元素所在的行框（line box），导致行内内容沿着浮动元素的边缘重新排布。
- 行内元素本身不能直接通过 float 变成浮动块（虽然技术上可以设置 float），但一旦设置了 float，它将表现出类似块级的行为（比如可设宽高）。
关键差异总结
- 空间占用：浮动块级元素脱离文档流，影响其他块布局；行内元素则适应浮动区域，实现环绕。
- 尺寸行为：块级元素浮动后宽度收缩；行内元素原本无宽高，浮动后获得设置能力。
- 排列方式：多个浮动块级元素会依次排列在同一行（若空间够）；行内元素则是内容级环绕浮动元素。
