Html 是什么导致页边距顶部不显示？

为什么

页边距最高：20px不起作用？这可能是什么原因造成的


#主{
保证金：0自动；
宽度：960px；
}
#左{
浮动：左；
边框：1px纯红；
宽度：300px；
右边距：10px；
高度：500px；
}
#对{
浮动：对；
边框：1px纯绿色；
宽度：500px；
高度：500px；
}
#页脚{
明确：两者皆有；
边缘顶部：20px；
边框：1px固体石灰；
高度：200px；
}
尝试添加一些更清晰的内容：

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div style="clear:both"></div>
  <div id="footer"></div>
</div>

带额外div：

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div id="footer" style="clear:both;margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div style="background:#0000FF;border:solid 1px #000000;clear:both">CLEARER</div>
  <div id="footer" style="margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>


左边
正确的
清晰的
页脚

资源：

添加div以清除浮动项

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div class="clear"></div>
<div id="footer"></div>
</div>

由于左侧和右侧浮动的位置，它们占用的空间已折叠，因此清除浮动将返回此空间，页脚将显示在它的正后方
解决方案与上面的解决方案相当好。如果选中，它们在页面中写入的文本将对用户可见，因此：
HTML:

可能的副本也是mu的副本太短了，为什么我要在页脚上加上清晰的：都是。它不能工作。如果添加样式浮动：左。页边空白处起作用。也就是说：#footer{clear:both；float:left；}@zhuanzhou：我刚刚修改了domanokz的格式，HTML和CSS是他的，但是它被隐藏了，因为他忘了缩进他的代码。为什么我在footer中添加clear:both。页边空白处不起作用。但如果我添加一个样式浮动：左。页边空白处起作用。也就是说：#footer{clear:both；float:left；}–不，你不会在页脚中同时添加clear-both，特别是如果它是浮动的，这就是为什么我添加了一个额外的divYa好的，它确实有效，但原因是什么。。。当我们添加这个DIV class='clear'时会发生什么。我们需要理解这一原则，以便下次我们自己应用它。我在回答的最后一段解释了这一点
.clear {
   clear: both;
}

<section id="main">
        <div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
        </div>
    </section>
    <div class="temp">c</div>
    <footer>
        <p>Hello Copyright &copy; 2019</p>
    </footer>

.box{
    float: left;
    width: 33%;

}

.temp{
    clear: both;
    margin-top: 20px;
    visibility: hidden;
}
footer p{
    clear: left;
    text-align: center;
    background-color: yellow;
}