浮动元素仍遵循盒模型结构，但脱离文档流导致排列方式改变：向左或右靠拢，margin影响间距且不合并，父容器易高度塌陷，需通过clearfix或BFC等方式修复，box-sizing属性依然生效。
浮动元素在CSS盒模型中的表现会受到布局方式的直接影响。理解盒模型（content、padding、border、margin）与浮动（float）之间的关系，有助于更准确地控制页面布局。
浮动如何改变盒模型的排列方式
当一个元素设置 float: left 或 float: right 时，它会脱离正常的文档流，向指定方向靠拢，直到其外边缘碰到包含块或另一个浮动元素的边界。
此时，该元素依然遵循盒模型的结构：内容区、内边距、边框和外边距都会参与计算其占据的空间，但与其他非浮动元素的交互方式发生变化。
- 浮动元素的 margin 会影响与其他元素的距离，包括文本环绕效果
- border 和 padding 正常应用，不会被压缩
- 多个浮动元素会依据顺序依次排列，若空间不足则换行
外边距合并不再发生
普通块级元素在垂直方向上可能发生外边距合并（margin collapsing），但一旦元素浮动，这种合并将不再出现。
立即学习“前端免费学习笔记（深入）”；
浮动元素的上下 margin 会完整保留，与其他元素的间距按照各自设定值累加，避免了意料之外的空白减少问题。
包含块的高度塌陷问题
由于浮动元素脱离了文档流，父容器无法自动伸展以包裹这些子元素，导致父元素高度“塌陷”——即高度为0或小于实际内容所需。
解决方法通常包括：
盒模型尺寸仍受box-sizing影响
无论是否浮动，box-sizing 属性都决定 width 和 height 的计算方式。
例如，设置 box-sizing: border-box 后，元素的 padding 和 border 会被包含在设定的宽度内，避免因浮动后空间不足而错位。
基本上就这些。浮动不影响盒模型本身的结构，但改变了它在布局中的行为方式，尤其是在空间分配和与其他元素的关系处理上。正确理解这一点，能更好应对传统布局中的常见问题。不复杂但容易忽略。
