Почему верхняя маржа не применяется после очистки флота?

Question

В следующем случае .p1 очищается от более раннего плавающего ящика и накладывает верхнюю границу на него, ожидая, что он сдвинется дальше от верхнего края видового экрана, а затем, что достигнуто с clear, однако margin-top не работает, если clear используется, если clear удален, он работает. Зачем?

HTML

<span style="float:right;width:30%;"> 
    content content content content content content content content... 
</span> 

<p class="p1">content content content content...</p> 

<p>content content content content...</p>  

CSS

span, p { 
    border: 3px solid black; 
    background-color: #ede; 
    padding: 10px; } 

.p1{ 
    clear: both; 
    margin-top: 200px; 
    } 

Может кто-нибудь объяснить, почему это margin-top не работает на .p1?

Answer 1

Вам необходимо добавить <div> (в моем случае с именем .clear) до .p1. Как:

<span style="float:right;width:30%;"> 
    content content content content content content content content... 
</span> 

<div class="clear"></div> 

<p class="p1">content content content content...</p> 

<p>content content content content...</p> 

Посмотрите в рабочем фрагменте коде ниже:

span, p { 
 
    border: 3px solid black; 
 
    background-color: #ede; 
 
    padding: 10px; 
 
} 
 

 
.p1 { 
 
    margin-top: 200px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<span style="float:right;width:30%;"> 
 
    content content content content content content content content... 
 
</span> 
 

 
<div class="clear"></div> 
 

 
<p class="p1">content content content content...</p> 
 

 
<p>content content content content...</p>

Надеется, что это помогает!