为什么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

那是因为浮动的元素.它们不会"计入"其容器的高度,除非它们被清除.

有几种结算技术,你可以使用,例如设置overflow: hidden在容器上:

.wrapper {
    overflow: hidden;
}

jsFiddle演示