what causes the margin top to not show?

why the margin-top: 20px; in footer doesn't work? what's the re开发者_如何学Cason may be cause to this?

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

Try to add some clearer:

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

When an element's css clear set to both, it won't let ANY FLOATING element to overlap in its border and text area, meaning margin can be overlapped by float elements. That is why you cannot see your footer's margin. So we basically need an extra div, which is not floated, so the margin of your footer has something to push. Try my codes below (with BG and Borders), you'll see what I'm saying.

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

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

Resource:

http://www.w3.org/TR/CSS2/visuren.html#flow-control

Add a div to clear the floating items

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

and the css

.clear {
   clear: both;
}

since the left and right where floating, the space they occupied collapsed, so clearing the float brings back this space and the footer will appear right after it

The solution is pretty good as from above solutions the text they write in page if selected then its visible to user so : 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;
}