浮动元素的外边距不会发生垂直塌陷，而是正常叠加。外边距塌陷仅发生在普通流中的块级元素间，而浮动元素脱离文档流，不参与塌陷。例如两个浮动元素的上下外边距分别为40px和30px时，实际间距为70px。同时需注意浮动导致的父容器高度塌陷问题，可通过clear、overflow或现代布局解决。margin与Float常用于图文环绕或多列布局，如设置margin-right实现文字绕图。掌握该特性有助于精准控制传统布局中的间距行为。
浮动元素的外边距不会像块级元素那样发生垂直方向的“塌陷”，但它们的行为在布局中确实有特殊表现。理解css中 margin 与 float 的关系，有助于避免布局错乱和意料之外的间距问题。
什么是外边距塌陷？
外边距塌陷（Margin Collapse）是指在文档流中，两个垂直方向上的相邻块级元素的上下外边距会合并为一个外边距，其大小取两者中的较大值。这种现象只发生在普通文档流中的块级盒子之间。
例如：
div1 的 margin-bottom: 20px;
div2 的 margin-top: 30px;
它们之间的实际间距是 30px，而不是 50px —— 这就是外边距塌陷。
立即学习“前端免费学习笔记（深入）”；
浮动元素不参与外边距塌陷
一旦元素设置了 float: left 或 float: right，它就脱离了标准文档流，因此不再参与垂直外边距的塌陷。
这意味着：
- 两个浮动元素之间的垂直外边距不会塌陷，而是正常叠加。
- 浮动元素与普通块级元素之间也不会发生外边距塌陷。
举例说明：
.box1 { float: left; margin-bottom: 40px; }
.box2 { float: left; margin-top: 30px; }
这两个元素虽然一上一下排列，但由于都处于浮动状态，它们之间的垂直间距是 40px + 30px = 70px，不会塌陷。
浮动对父容器的影响：高度塌陷
注意不要混淆“外边距塌陷”和“高度塌陷”。浮动元素常引起的是父容器高度塌陷——即父元素无法自动包含浮动子元素的高度，导致背景、边框等显示异常。
解决方法包括：
- 使用 clear: both 在浮动元素后添加清除元素。
- 给父容器设置 overflow: hidden 或 overflow: auto。
- 使用 BFC（块格式化上下文）或 flex/Grid 布局替代传统浮动。
margin 与 float 的常见配合用法
浮动常用于图文环绕或横向排列模块，此时 margin 用来控制间距：
- 图片浮动时，通过 margin 设置文字与其之间的距离。
- 多个浮动块之间用 margin 分隔，实现网格效果（但需注意总宽度不能溢出容器）。
示例：实现两栏布局
img { float: left; margin-right: 15px; }
p { margin: 0; }
文字会围绕图片排列，右侧留出 15px 间隙。
基本上就这些。浮动元素的 margin 不会塌陷，反而会正常叠加，这是它脱离标准流的表现之一。掌握这一点，能更准确地控制老式布局或兼容需求中的样式行为。