爲什麼頂部邊距在清除浮球后不會被應用？

Question

以下.p1從早期的浮動框中清除，並將頂部邊距應用於期望它將從視口的頂部邊緣進一步向下移動，那麼使用clear可以實現什麼，但如果clear是margin-top似乎不起作用使用，如果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

您需要在.p1之前添加一個<div>（在我的案例中名爲.clear）。像：

<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>

希望這有助於！