what leads to the fact that the top of the field is not displayed?

Question

why margin-top: 20px; doesn’t work in the footer? What reason can be the reason for 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> 

Answer 1

Try adding a clearer one:

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

When the css clear element is set to both , it will not allow the ANY FLOATING element to overlap at its border and text area, which means that the margin can overlap with float elements. That is why you do not see the border of the footer. So we basically need an extra div that doesn't float, so the edge of your footer is pushing something. Try my codes below (with BG and Borders), you will see what I say.

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

Answer 2

Add a div to clear floating elements

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

and css

 .clear { clear: both; } 

since the space in which they are occupied left and right, where they are floating, has collapsed, so clearing the float returns this space, and the footer will appear immediately after it

Answer 3

The solution is pretty good, because from the above solutions the text that they write on the page, if selected, is visible to the user like this: 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; }