Algunas declaraciones asociadas a la propiedad float innecesarias. Ya sea por redundantes o incongruentes debido a las características innatas a los elementos flotados.

Incongruencias y redundancias habituales asociadas a la propiedad float

Incongruencias y redundancias asociadas a la propiedad floatHay una serie de prácticas a la hora de declarar distintas propiedades Css que no por encontrarlas más o menos a menudo son correctas. Unas veces por innecesarias (redundantes) y otras veces por ser incongruentes (contradictorias) por la naturaleza de ellas mismas o de los valores explicitados.

Una de las propiedades css que más se presta a estas prácticas, por desconocimiento o despiste, es la propiedad float, ya sea declarada a elementos por naturaleza de bloque o de línea.

Float + clear: both

Una caja flotada (float: left | right) es una caja desplazada a la izquierda o derecha en su línea. Interpreta línea como renglón. La característica principal de los elementos flotados es que el contenido puede fluir por su(s) costado(s). Esto es, no fuerza un salto de línea: no obliga al siguiente elemento en el DOM a colocarse debajo (eje Y). Aunque esto puede impedirse con la propiedad clear.

Valores posibles de clear: none / left / right / both / inherit

Incongruencia

li { float: left; clear: both; }

Hecho: Al "limpiar" a ambos lados (izquierda y derecha) se anula la razón de ser del flotado. Perdiste sus ventajas y te quedaste con sus "inconvenientes (elemento fuera del flujo).

Float + display: block

Redundancia

.mi_clase { float: left; display: block; }

La razón es que al declarar un float el elemento automáticamente se convierte en un objeto de bloque: display: block y por lo tanto es innecesario explicitarlo.

La especificación de Css2 indica que en una caja flotada la propiedad display es ignorada excepto si su valor es none.

Float + width: auto / 100%

Otra particularidad de un elemento flotado para que sea posible que su hermano se coloque junto a él en el eje X es que tiene que tener una anchura menor que la del padre que los contiene. Y por supuesto dejar un espacio libre en la horizontal (eje X) suficiente para que el siguiente elemento se coloque en su misma línea.

Un apunte de sobra conocido entre la diferencia de los valores auto | 100% en la propiedad width

Auto: Significa que el elemento ocupará toda la anchura que tenga disponible su contenedor padre en esa línea.

100%: Significa que el elemento ocupará el 100% de la anchura de su padre.

Aunque parezca lo mismo no lo es. Todo depende del modelo de caja que estés utilizando.

Si es el tradicional y declaras 100% a la anchura del hijo te encontrarás con desbordes si la caja padre tiene márgenes, bordes o paddings o recortes en el hijo si el padre tiene limitado el overflow.

Incongruencia y redundancia

article { float: left; width: 100% /*o el valor 'auto'*/; }

La razón de la incongruencia del valor 100% es la misma que no limitar la anchura

La redundancia del valor auto (si por alguna razón muy particular necesitas que además de flotado ocupe toda la línea) es que es el valor por defecto para la anchura de los elementos en bloque.

Float + margin

¿Recuerdas el artículo dedicado a los márgenes colapsados? En concreto el apartado dedicado a los elementos anidados y a los hermanos.

Pues otra característica inherente a los elementos flotados es que ese colapso o cierre entre márgenes de elementos flotados no se produce.

Dos situaciones donde este cierre de márgenes no se realiza. A la izquierda (o encima) la imagen resultante del código de la derecha (o inferior según la anchura de tu viewport):

elementos flotados y márgenes no colapsados img { float: left; } body, p, img { margin: 2em; } <!-- html --> <body> <p><img src='img.ext' alt='' /> Un texto de ejemplo... </p> </body>

Origen de la imagen: sidar.org

Float + z-index

float y z-index

En caso de superposiciones, por definición y en ausencia de declaraciones explícitas de z-index, un elemento flotado tiene un z-index superior al resto. Aunque aparezca antes en el DOM.

h1, p, img {margin: 1rem; border: 1px solid #cdcdcd; background: #f5f5f5;} img { float: left; width: 100px; padding: 1rem; background: #eee; z-index: 5; /*innecesario excepto que...*/ } <!-- html --> <p><img src='...' /> En caso de...</p> <h1>Ksesocss...</h1>

La propiedad z-index sí será necesaria si por declaración expresa se ha cambiado el valor por defecto de position: static

En esta última imagen también se puede observar que los márgenes superior e inferior de la imagen no colapsan.

La superposición se evita declarando al h1 clear: both. Esta última declaración en el párrafo (padre del elemento flotado) no surte ningún efecto. O mejor dicho: el párrafo ya impide que el h1 se coloque a su lateral ya que ambos son elementos de bloque y el efecto es debido a que la imagen ha salido del flujo del documento.

Así que para corregir los dos efectos (desborde y superposición) es necesario limpiar el float actuando ahora sí sobre el párrafo.

Lectura recomendada

Para una compresión más a fondo de la propiedad float y sus particularidades un buen sitio es el apartado dedicado a los flotados en el sidar

Publicado el 29 de julio de 2013 y Archivado en

Y para terminar, como agradecimiento a tu visita, déjame que te haga estas sugerencias:

Suscríbete a los artículos.

Nada de spam. Sólo avisos de nuevos posts.

Comparte y sorprende.

votar

También puedes ir a alguno de estos artículos que tienen relación con el que acabas de ver:

No hay comentarios