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>

查看下面的工作代码段：

＆＃13;

span, p {
  border: 3px solid black;
  background-color: #ede;
  padding: 10px;
}

.p1 {
  margin-top: 200px;
}

.clear {
  clear: both;
}

＆＃13;

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

＆＃13;

希望这有帮助！

为什么在清算浮动后没有应用最高保证金？

1 个答案: