Clear

[lissette22]

Hola,

Tengo una dudilla... hace poco que estoy trabajando con css y me surje una duda, cuando usas el float, ya sea left o right es necesario limpiar para que luego te salga bien el resto de la página.
Yo en mi código html tengo una capa <div class="clear"/> es neceario que se ponga cada vez que utilizas el float, no me parece muy apropiado porque estamos metiendo varios div vacíos.
¿Esto es correcto o hay alguna otra solución?

Gracias

[ArturoGallegos]

para empezar usar <div class="clear"/> es incorrecto ya que los div tienen etiqueta de apertura <div> y etiqueta de cierre </div>

no es necesario usar ese div vació con un clear puede ser cualquier elemento que este después de tus elementos flotantes, o en algunos casos si tienes tus elementos flotantes dentro de un contenedor padre y este ocupa el 100% de ancho a este le puedes aplicar un overflow:hidden y tendría el mismo efecto

[lissette22]

Osea con poner al siguiente elemento el clear me evitaría tener el div. Umm.. lo del overflow no me queda claro...

[ArturoGallegos]

así es con ponerle un clear:both al siguiente elemento que desees rompa el efecto de los elementos flotantes es mas que suficiente...

con lo del overflow:hidden creo que me fui mas adelante a tus necesidades.... pero aun así te lo explico con un ejemplo básico, cuando un div contiene elementos flotantes este no puede tomar la altura de los elementos hijos si no aplicas un clear al final o aplicas un overflow sobre el div padre... prueba estos 3 códigos en un html en blanco y notaras el efecto al que me refiero

codigo sin clear y sin overflow

Código HTML:

<div style="background:#fe0;">
    <div style="float:left;height:30px;background:#03f;">adsaa</div>
    <div style="float:left;height:300px;background:#f00;">adsaa</div>
</div>
 

codigo con clear

Código HTML:

<div style="background:#fe0;">
    <div style="float:left;height:30px;background:#03f;">adsaa</div>
    <div style="float:left;height:300px;background:#f00;">adsaa</div>
    <br style="clear:both;" />
</div>
 

codigo con overflow

Código HTML:

<div style="background:#fe0;overflow:hidden;">
    <div style="float:left;height:30px;background:#03f;">adsaa</div>
    <div style="float:left;height:300px;background:#f00;">adsaa</div>
</div>