3

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

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

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

margin-top 不适用于 clear: both

谢谢

4

2 回答 2

8

边距是元素与同一上下文中其他元素之间的最小距离。浮动元素基本上完全“断章取义”。它们不计入保证金计算。任何基于边距计算其相对于其他元素的位置的元素都会完全忽略浮动元素。因此，并不是clear: bothplusmargin不起作用，而是margin忽略了浮动元素。

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

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

上面的 XYZ 边距表示该元素需要 XYZ 与其他常规元素的最小距离。下一个重要的元素是常规display: block元素，距离它很远。右浮动元素被忽略。但是右浮动元素会由于clear: both.

于 2013-08-11T20:43:35.203 回答
0

在w3.org上发现了这种行为：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，浮动旁边创建的当前和后续行框会根据需要缩短，以便为浮动的边距框腾出空间。

也在这里。两个例子： 

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 20px;">Main (the top margin is ignored for this non-positioned div)</div>

<br/><br/><br/>

<div style="float: left;">Left</div>
<div style="float: right; margin-bottom:20px;">Right (the bottom margin is used for this positioned div)</div>
<div style="clear: both;">Main</div>

http://jsfiddle.net/VQMqX/175/

于 2013-08-11T21:31:01.993 回答