导致页边距顶部不显示的原因

Question

为什么margin-top: 20px;在页脚不工作?造成这种情况的原因是什么?

#main {
  margin: 0 auto;
  width: 960px;
}
#left {
  float: left;
  border: 1px solid red;
  width: 300px;
  margin-right: 10px;
  height: 500px;
}
#right {
  float: right;
  border: 1px solid green;
  width: 500px;
  height: 500px;
}
#footer {
  clear: both;
  margin-top: 20px;
  border: 1px solid lime;
  height: 200px;
}

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

Answer 1

尝试添加一些更清晰的:

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

当一个元素的css clear设置为both时，它将不允许任何浮动元素在其边框和文本区域重叠，这意味着浮动元素可以与边框重叠。这就是为什么你看不到页脚的边距。所以我们基本上需要一个额外的div，它不是浮动的，所以你的页脚边缘有一些东西可以推。试试我下面的代码(带BG和边框)，你会看到我在说什么。

不带额外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:

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

资源:

http://www.w3.org/TR/CSS2/visuren.html流控制

Answer 2

添加div来清除浮动项

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

和css

.clear {
   clear: both;
}

因为左边和右边是浮动的，它们占用的空间塌陷了，所以清除浮动会收回这些空间并且页脚会出现在它后面

Answer 3

这个解决方案非常好，因为从上面的解决方案中，他们在页面上写的文本如果被选中，那么它对用户是可见的，所以:HTML:

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

CSS:

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