Foros del Web » Creando para Internet » CSS »

Clear

Estas en el tema de Clear en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2011, 17:38
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Pregunta Clear

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
  #2 (permalink)  
Antiguo 16/02/2011, 17:54
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Clear

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 16/02/2011, 17:58
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Clear

Osea con poner al siguiente elemento el clear me evitaría tener el div. Umm.. lo del overflow no me queda claro...
  #4 (permalink)  
Antiguo 16/02/2011, 18:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Clear

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:
Ver original
  1. <div style="background:#fe0;">
  2.     <div style="float:left;height:30px;background:#03f;">adsaa</div>
  3.     <div style="float:left;height:300px;background:#f00;">adsaa</div>
  4. </div>

codigo con clear
Código HTML:
Ver original
  1. <div style="background:#fe0;">
  2.     <div style="float:left;height:30px;background:#03f;">adsaa</div>
  3.     <div style="float:left;height:300px;background:#f00;">adsaa</div>
  4.     <br style="clear:both;" />
  5. </div>

codigo con overflow
Código HTML:
Ver original
  1. <div style="background:#fe0;overflow:hidden;">
  2.     <div style="float:left;height:30px;background:#03f;">adsaa</div>
  3.     <div style="float:left;height:300px;background:#f00;">adsaa</div>
  4. </div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:13.