Incongruencias y redundancias habituales asociadas a la propiedad float 29.7.13
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
Hay 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):
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
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
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
oye amigo una pregunta en el ejemplo del "codigo 5" es valido que uses {width:100%;} cuando tienes un {float:left;}. según he entendido en tus blogs es innecesario podrias confirmar es que estoy aprediendo.
ResponderEliminarEn ese ejemplo, Miguel, la anchura está definida en píxeles (100px).
Eliminar<img .../> es un elemento reemplazado y si no se declara su tamaño vía css o con el atributo width y/o height será el natural de la imagen.
Así que supongo (han pasado casi tres años desde su publicación) que mi intención fue limitar su tamaño para que la imagen y el texto del párrafo se colocasen en una sola línea y al ser tan escaso el texto la imagen sobresaliese fuera del párrafo y se sobrepusiese (z-index) a la caja generada por el h1 pese a que su contenido fuerza un desplazamiento hacia la derecha (direction es LtR por defecto en escrituras latinas) hasta librar la caja generada por la imagen.
Un saludo.