FLOAT, cuatro formas de contención
De vuelta con el inseparable amigo de cualquier diseñador web: float.
Voy a resumir en este post 4 formas de contener los efectos colaterales evitando «desbordamientos» y la desorganizanción de los elementos fluidos.
Easy clearing (Big John)
Soluciona el problema creando la clase clearfix.
Esta técnica es eficiente, no obstante y de forma personal la he usado en algunas ocasiones y no me parece tan cross-browsing como otras técnicas. Por otro lado su implementación no me convence puesto que la separación estructura-estilo se ve un tanto afectada al requerir la inclusión de la clase.
Un contenedor fluido soluciona el contenido fluido (Meyer)
Suena un poco redundante pero no he conseguido explicarlo mejor 🙂 .
Cuando comencé con CSS descubrí fortuitamente este método (os ha pasado?) y quizás fue la que mas he usado. Su implementación tiene el problema de aplicar demasiado float al estilo, sin embargo tiene un buen nivel de cross-browsing.
Usar «clear: both;» en un salto de línea
Podemos hacer una clase clear que contenga el clear: both; de esta forma podemos mejorar su inclusión. Aunque su uso sea necesario en algunas ocasiones la separación estructura-estilo queda afectada al requerir de un extra que no aporta información al contenido al tratarse de un arreglo de diseño.
Overflow y width como clearfix
Totalmente cross-browsing y con una implementación muy sencilla. Cabe destacar que esta técnica mantiene la abstracción de la estructura y el estilo. Mi preferida 😉
¿Cuál es vuestra técnica favorita?
2 Comments
Chavalina
Desde que la descubrí… overflow y witdh!!
sin duda 😉
kcmr
A mí el overflow me ha dado algún problema en IE 6 (contenidos que no aparecen, capas emergentes cortadas, etc.) y FF 2 (todo el contenido de la página queda seleccionado al hacer click fuera del bloque contenedor). Bueno, lo de FF 2 se puede olvidar.
Yo prefiero el .clearfix. Aplicándolo directamente a divs, sin necesidad de especificar una clase, te ahorras el tener que ponerlo demasiadas veces en el HTML.
En cuanto a lo de crossbrowser, la versión que utiliza el display inline-block para Explorer 7, desde luego que no lo es, todo lo contrario.
Yo uso esta:
.clearfix:after, div:after{content: «»; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix, div{min-height: 0;}
* html .clearfix, * html div{ height: 1%; }
El min-height da layout a IE 7 y es completamente inofensivo para otros navegadores.
En fin, para gustos, colores 😉
Saludos
Comments are closed for this post