爲什麼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和清除其他的答案，這應該幫助。