css - 有人可以向我解释为什么清除 :both and margin-top cannot work in the same div

Question

我已经遇到了一些解释，包括 stackoverflow，但不幸的是，我仍然无法完全理解它的原因。

那么，有人可以用简单的方式解释一下吗？

这是一个类似于我要问的问题，但我不明白是什么原因。它解决了我的问题，但我只想知道为什么。

margin-top not working with clear: both

谢谢

Answer 1

边距是同一上下文中一个元素与其他元素之间的最小距离。 float 元素基本上是完全“断章取义”的。它们不计入 margin 计算。任何基于边距计算其相对于其他元素位置的元素都会完全忽略 float 元素。所以并不是说 clear: both 加上 margin 不起作用，而是 margin 忽略了 float 元素。

clear: both 只会使元素低于所有先前的 float 元素，其边距计算不会将其进一步向下推，因为在边距计算中忽略了 float 元素。

            +-------------------+ 
            |                   |
            |  display: block   |
            |                   |
            +-------------------+
                       +--------+
            ---        |        |
             |         | float: |
  margin XYZ |         | right  |
             |         |        |
            ---        +--------+
            +-------------------+  <-- effect of clear: both
            |                   |
            |    clear: both    |
            | margin-top: XYZpx |
            |                   |
            +-------------------+

上面的边距 XYZ 表示该元素需要与其他常规元素的最小 XYZ 距离。下一个重要的元素是常规 display: block 元素，与它的距离很远。右侧的 float 元素将被忽略。但是由于 clear: both，右侧的 float 元素导致下方 block 被向下推到其边界以下。