¿por qué el margen superior no funciona?

la estructura html:¿por qué el margen superior no funciona?

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

el estilo:

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

por qué el margin-top: 20px; en el pie de página no funciona? ¿Cuál es la razón que puede ser la causa de esto?

Fuente

2011-07-09 zhuanzhou

posible duplicado de [En css margin-top no funciona con clear: both] (http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both) – Nicole

también un duplicado de [margin-top debajo de un div css flotante] (http://stackoverflow.com/questions/3236060/margin-top-under-a-floated-div-css) – Nicole

Trate de añadir un poco más claro:

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

Cuando de un elemento css clear conjunto de both, no va a dejar que ningún elemento flotante a superponerse en su zona fronteriza y el texto, es decir, el margen puede ser solapado por flotación elementos. Es por eso que no puede ver el margen de su pie de página. Entonces, básicamente, necesitamos un div adicional, que no está flotante, por lo que el margen de su pie de página tiene algo que presionar. Prueba mis códigos a continuación (con BG y Borders), verás lo que estoy diciendo.

Sin div extra:

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

Con div extra:

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

de recursos:

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

Fuente

2011-07-09 03:22:28 dpp

mu es demasiado corto, ¿por qué añado el claro: ambos al pie de página. no puede funcionar si agrego un estilo flotante: izquierda. el margen superior funciona. a saber: #footer {clear: both; float: left;} – zhuanzhou

@zhuanzhou: Acabo de arreglar el formateo de domanokz, el HTML y el CSS son suyos, pero estaba oculto porque se olvidó de aplicar sangría a su código. –

@zhuanzhou - Espero que mi revisión borre su mente. – dpp

Añadir un div para borrar los elementos flotantes

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

y el css

.clear { 
    clear: both; 
}

desde la izquierda y la derecha, donde flotante, el espacio que ocupaban colapsado, por lo que la limpieza del flotador lleva de nuevo este espacio y el pie de página aparecerá justo después de que

Fuente

2011-07-09 03:24:43 Ibu

por qué agrego el claro: ambos al pie de página. el margen superior no puede funcionar. pero si agrego un estilo flotante: a la izquierda. el margen superior funciona. a saber: #footer {clear: both; float: left;} - – zhuanzhou

no, no le agregas ambos claros al pie de página, especialmente si está flotando, es por eso que agregué un div extra – Ibu

Ya está bien, funciona, pero cuál es el motivo ... ¿Qué sucede cuando agregamos esto? DIV class = 'clear'. Necesitamos entender el principio para que podamos aplicarlo nosotros mismos la próxima vez. –

¿por qué el margen superior no funciona?

Respuesta

Cuestiones relacionadas