Почему маржа не работает в этом случае?

Question

Хотелось бы узнать, почему мой класс .top не работает для моего второго DIV wrapper top? Я ожидал бы 200px между нижней частью рисунка справа и верхней частью красного DIV, но он не работает. См 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

У вас есть какой-то сломанный код в вашей скрипке, я обновил его с некоторыми исправлениями. Другое дело, что вы не учитываете свое дополнение, когда вы устанавливаете ширину блоков-1 и блок-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> 

Наряду с другими ответами в отношении плавающих див и очисток, это должно помочь.