dlaczego górny margines nie działa?

Question

struktura html:

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

styl:

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

dlaczego margin-top: 20px; w stopce nie działa? z jakiego powodu może to być przyczyną?

Answer 1

spróbuj dodać trochę jaśniej:

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

Gdy element jest css clear zestaw do both, nie pozwolę dowolny element pływające do pokrywają się w jej strefie przygranicznej i tekstu, czyli margines może być zakryte przez pływaka elementy. Dlatego nie widać marży stopki. Więc potrzebujemy po prostu dodatkowego diva, który nie jest pływający, więc margines twojej stopki ma coś do wypchnięcia. Wypróbuj moje kody poniżej (z BG i granicami), zobaczysz, co mówię.

bez dodatkowego Gr:

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

z dodatkowym Gr:

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

zasobów:

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

Answer 2

Dodaj div aby wyczyścić pływające przedmioty

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

i css

.clear { 
    clear: both; 
} 

od lewej i prawej stronie, gdzie pływającego, miejsce zajęli upadł, więc wyczyszczenie pływak przywraca tę przestrzeń i stopka pojawi się tuż po jej