为什么margin-top在这种情况下不起作用？

Question

我想知道为什么我的班级.top不适用于我的第二个DIV wrapper top？我希望在右边图片的底部和红色DIV的顶部之间有200px，但它不起作用。见JSFIddle

HTML

<div class="wrapper top"> 
    <div class="block-1"> 
    <p><span>ddfsfsdsfds</p> 
    <p>fdsfsdfs.</p> 
    <p>dfsdfdsfds.</p> 
    </div> 
    <div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div> 

</div><!-- End wrapper --> 
<div class="wrapper top"> 
<div class="block-100pc"> 
block-100pc 
</div> 
</div> 

CSS

body { 
    background: #F2F2F2; 
} 
.top { 
    margin-top: 200px; 
} 
.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
} 
.block-1 { 
    float: left; 
    box-sizing: border-box; 
    padding: 20px; 
    width: 60%; 
    text-align: justify; 
    background-clip: border-box; 
    background: #fff; 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
} 
.block-1 span { 
    color: #124191; 
    font-weight: bold; 
} 
.block-2 { 
    float: right; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 35%; 
    padding: 20px; 
    background-clip: border-box; 
    background: #fff; 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    text-align: justify; 
} 
.block-100pc { 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 100%; 
    padding: 20px; 
    background-clip: border-box; 
    background: #fff; 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    text-align: justify; 
    clear: both; 
    background: red; 
} 

Answer 1

这是因为漂浮的元素。他们不会“计入”其容器的高度，unless they are cleared。

有several clearing techniques就可以使用，例如设置在容器上overflow: hidden：

.wrapper { 
    overflow: hidden; 
} 

jsFiddle Demo

Answer 2

.block-1 { 
    margin-top: 200px; 

} 

或

.top { 
    margin-bottom: 200px; 
} 

任一人都应该工作

Answer 3

margin-top不适用于您的情况，因为上面的两个块都是浮动的。 margin-top属性适用于父级的顶部。

为了看到上边距，您将不得不应用margin-top =最高浮动div的高度+所需的边距。

Answer 4

您的提琴一些断码的，我和一些修补程序更新它。另一件事是，当你设置了block-1和block-2的宽度时，你没有考虑到你的填充，因此它们是重叠的。将块1的宽度降低到较低的百分比以允许块上的填充。下面是一个更新的小提琴：http://jsfiddle.net/pB5kq/5/

<div class="wrapper top"> 

    <div class="block-1"> 
    <p><span>ddfsfsdsfds</span></p> 
    <p>fdsfsdfs.</p> 
    <p>dfsdfdsfds.</p> 
    </div> 

    <div class="block-2"> 
     <img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></img> 
    </div> 

<div class="wrapper top"> 
<div class="block-100pc"> 
block-100pc 
</div> 
</div> 

随着关于浮动的div和清除其他的答案，这应该帮助。