有人可以向我解释为什么清除:和margin-top不能在同一个div中工作 [英] Can someone explain to me why clear:both and margin-top cannot work in the same div

问题描述

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

I have already came across some explanations, including stackoverflow, but unfortunately, I still can't understand perfectly what is the cause of it.

那么，有人可以用简单的方式解释它吗?

So, can someone please explain it in a simple way?

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

Here is a question similar to what I'm asking but I didn't understand what is the cause. It fixed my problem, but I just want to know why.

margin-top无法正常使用:两者

谢谢

推荐答案

空白是同一上下文中元素与其他元素之间的最小距离.浮动元素基本上完全是脱离上下文".他们不计算保证金.任何基于边距计算其相对于其他元素的位置的元素都将完全忽略浮动元素.因此，并不是clear: both加margin不起作用，而是margin忽略了浮动元素.

A margin is a minimal distance between an element and other elements in the same context. Floated elements are basically completely "taken out of context". They don't count for margin calculations. Any element calculating its position relative to other elements based on margins ignores floated elements entirely. So it's not that clear: both plus margin doesn't work, it's that margin ignores floated elements.

clear: both仅使元素下降到所有之前的浮动元素之下，其边距计算不会将其进一步推低，因为在边距计算中会忽略浮动元素.

The clear: both merely causes the element to drop below all previous floated elements, its margin calculation does not push it further down because floated elements are ignored in margin calculations.

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

上面的XYZ边距表示该元素需要XYZ到其他常规元素的最小距离.下一个重要的元素是常规display: block元素，并且到它的距离足够大.右边的浮动元素将被忽略.但是，由于clear: both，右浮动元素导致下块被向下推到其边界以下.

The above margin XYZ says the element needs a minimal distance of XYZ to other regular elements. The next element that counts is the regular display: block element, and the distance to it is plenty. The right floating element is ignored. But the right floating element causes the lower block to be pushed down below its boundary due to clear: both.

这篇关于有人可以向我解释为什么清除:和margin-top不能在同一个div中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！