有人可以向我解释为什么清楚:两者和margin-top不能在同一个div中工作

Question

我已经遇到过一些解释,包括stackoverflow,但不幸的是,我仍然无法完全理解它的原因是什么.

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

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

margin-top无法使用clear:both

谢谢

Answer 1

边距是元素与同一上下文中的其他元素之间的最小距离.浮动元素基本上完全"脱离背景".它们不计入保证金计算.根据边距计算其相对于其他元素的位置的任何元素都会完全忽略浮动元素.所以这不是clear: both加号margin不起作用,而是margin忽略浮动元素.

在clear: both仅造成下降到低于以前的所有浮动元素的元素,因为浮动元素的差额计算忽视了它的利润率计算不推进一步下跌.

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

上述边界XYZ表示该元素需要XYZ与其他常规元素的最小距离.计算的下一个元素是常规display: block元素,与它的距离很大.右浮动元素被忽略.但是正确的浮动元素会导致下部块被推到其边界下方clear: both.