Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

CSS: Limpiar floats

10 abril, 2011
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.

La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto. Como los elementos interiores están posicionados de forma flotante y el elemento contenedor no dispone de más contenidos, el resultado es el siguiente:

f01011
Los elementos posicionados de forma flotante se salen de su elemento contenedor

El código HMTL de este ejemplo es:


<div id="contenedor">
 <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
 <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
 </div>

La hoja de estilos aplicada es:


#contenedor {
 border: thick solid #000;
}
 #izquierda {
 float: left;
 width: 40%;
}
 #derecha {
 float: right;
 width: 40%;
}

He creado un contenedor, una caja contenedora, que he llamado «contenedor» con un borde solido de color negro. Dentro de esta caja creo otras dos cajas, una llamada izquierda que alineo a la iquierda con un ancho del 40% de la caja contenedara. La otra caja hago lo mismo alineando a la derecha y la llamo derecha.

¿Cómo solucionamos el problema?

Podemos solucionar de dos formas diferentes:

  1. Añadimos un elemento div sin contenido:
    Añadimos un elemento invisible después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>. Nuestra página quedaría de la siguiente forma

    <div id="contenedor">
     <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
     <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
     <div style="clear: both"></div>
    </div>
    
  2. Propiedad overflow:
    Desde la hoja de estilos podemos conseguir el mismo resultado con la propiedad overflow, en este caso la hoja de estilos quedaría al modificar el contenedor:

    #contenedor {
     border:   thick solid #000;
     overflow: hidden;
    }
    

Cuando utilizamos la segunda opción encontramos problemas con navegadores antiguos, sobre todo con internet Explorer, como solución final tendríamos la siguiente hoja de estilos


#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 height:   1%;
}

#izquierda {
 float: left;
 width: 40%;
}

#derecha {
 float: right;
 width: 40%;
}

Donde he añadido la siguiente linea a la hoja de estilos, en la caja contenedor

height:   1%;
Etiquetas: cssfloatlimpiar floatoverflow
ANUNCIO
Post anterior

Códigos HMTL para español, carácteres especiales

Próximo Post

WordPress 3.1.1

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

Creación de un pincel personalizado en photoshop

Creación de un pincel personalizado en photoshop

23 enero, 2012
Reglas CSS por defecto para los navegadores

Utilidades molonas para el webmaster inquieto

19 febrero, 2012
El SEO en España, el mejor seo a nivel mundial

El SEO en España, el mejor seo a nivel mundial

22 octubre, 2019
deteccion-movil

Qué es AMP (Accelerated Mobile Pages) y porque usarlo

9 enero, 2019

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .