为何 Margin 塌陷如此恼人
在网页布局中，margin 塌陷问题令人头疼不已。这一现象特指当相邻的元素都设置了 margin 且方向相同（如 margin-top）时，它们之间的间隔会被折叠为较大的 margin。这种情况在涉及多级嵌套时尤为明显。
理解 Margin 塌陷
这一现象源于浏览器的默认行为。当两个相邻元素在同一方向上都有 margin 时，浏览器会计算出这两个 margin 中较大的一个作为它们之间的实际间隔。例如， यदि元素 A 设置了 20px 的 margin-top，元素 B 设置了 10px 的 margin-top，那么它们之间的实际间隔仅为 20px。
代码中的示例
你提供的代码中，容器 one 和 two 的 margin-top 分别设置为 20px 和 40px。然而，结果却是容器 one 和 two 之间的实际间隔仅为 40px，而不是如预期中的 60px。这是因为在容器 one 和容器 two 的外部父容器中，这两个相邻元素都设置了 margin-top，导致了 margin 塌陷。
如何解决 Margin 塌陷
解决 margin 塌陷问题有几种方法：
- Floats 或 Absolutes：将相邻元素设置为 float 或 absolute 可以脱离父元素的上下文，从而避免 margin 塌陷。
- Negative Margins：为其中一个元素设置负 margin 可以抵消另一个元素的 margin，从而创建所需的间隔。
- Padding：使用 padding 替代 margin 来创建元素之间的间隔，因为它不受 margin 塌陷的影响。
- 清除（Clear）：设置一个额外的元素来清除相邻元素的 float 或绝对定位，从而防止它们的 margin 塌陷。
虽然 margin 塌陷可能令人沮丧，但了解其机制和解决方法对于有效地进行网页布局至关重要。通过遵循这些准则，你可以避免在构建布局时遇到此类问题。
