Flotar - Trucos CSS

La floatpropiedad en CSS se utiliza para el posicionamiento y diseño en páginas web.

.module ( float: left; )

Valores

• none: el elemento no flota. Este es el valor inicial.
• left: flota el elemento a la izquierda de su contenedor.
• right: flota el elemento a la derecha de su contenedor.
• inherit: el elemento hereda la dirección flotante de su padre.

Nota: un elemento flotante se display: block;

¿Qué significa flotar?

Para comprender el propósito y el origen de float, podemos buscar el diseño de impresión. En un diseño de impresión, las imágenes se pueden colocar en la página de modo que el texto las envuelva según sea necesario. Esto se denomina comúnmente y apropiadamente "ajuste de texto". He aquí un ejemplo de eso.

En los programas de diseño de página, se puede indicar a los cuadros que contienen el texto que respeten el ajuste del texto o que lo ignoren. Ignorar el ajuste de texto permitirá que las palabras fluyan directamente sobre la imagen como si ni siquiera estuvieran allí. Ésta es la diferencia entre que esa imagen sea parte del flujo de la página (o no). El diseño web es muy similar.

En el diseño web, los elementos de página con la floatpropiedad CSS aplicada son como las imágenes en el diseño de impresión donde el texto fluye a su alrededor. Los elementos flotantes siguen siendo parte del flujo de la página web. Esto es claramente diferente a los elementos de página que usan posicionamiento absoluto. Los elementos de página en posición absoluta se eliminan del flujo de la página web, como cuando se le dijo al cuadro de texto en el diseño de impresión que ignorara el ajuste de página. Los elementos de la página absolutamente posicionados no afectarán la posición de otros elementos, y otros elementos no los afectarán, se toquen entre sí o no.

Manifestación

Esta demostración muestra un artículo con dos imágenes: una configurada en float: lefty otra configurada en float: right. Presione el botón "alternar flotadores" para activar y desactivar los flotadores.

Vea el ejemplo de Pen Float de CSS-Tricks (@ css-tricks) en CodePen.

Flotadores para el diseño

Aparte del simple ejemplo de envolver texto alrededor de imágenes, los flotadores se pueden usar para crear diseños web completos .

Los flotadores también son útiles para el diseño en instancias más pequeñas. Tomemos, por ejemplo, esta pequeña área de una página web. Si usamos floatpara nuestra imagen de avatar, cuando esa imagen cambie de tamaño, el texto en el cuadro se reajustará para acomodarlo:

Este mismo diseño podría lograrse utilizando el posicionamiento relativo en el contenedor y también el posicionamiento absoluto en el avatar. Pero, cuando se hace de esa manera, el texto no se verá afectado por el avatar y no podrá volver a fluir con un cambio de tamaño.

Manifestación

Esta demostración muestra un avatar float: leftaplicado. Presione el botón "alternar tamaño de imagen" para ver una versión más amplia de la imagen del avatar. Observe que el texto se reajusta para adaptarse a la imagen en lugar de pasar sobre la imagen.

Vea la demostración de Pen Float de CSS-Tricks (@ css-tricks) en CodePen.

Limpiando el flotador

La propiedad hermana de Float es clear. Un elemento que tiene la clearpropiedad establecida no se moverá adyacente al flotador como lo desea el flotador, sino que se moverá hacia abajo más allá del flotador. Nuevamente, una ilustración es más útil que las palabras:

En el ejemplo anterior, la barra lateral flota hacia la derecha y es más corta que el área de contenido principal. A continuación, se requiere que el pie de página salte al espacio disponible como lo requiere el flotador. Para solucionar este problema, se puede borrar el pie de página para asegurarse de que permanezca debajo de ambas columnas flotantes.

#footer ( clear: both; )

Clear también tiene cuatro valores válidos. El valor bothes el más comúnmente utilizado, que borra los flotadores que vienen de cualquier dirección. Los valores lefty rightse pueden usar para borrar solo el flotador de una dirección respectivamente. El valor inicial es none, que normalmente es innecesario a menos que se utilice para eliminar explícitamente un clearvalor que se ha establecido. El valor inherithace que el elemento herede el clearvalor de su padre . Curiosamente, Internet Explorer no admitió este valor hasta IE8.

Limpiar solo el flotador lefto right, aunque es menos común en la naturaleza, definitivamente tiene sus usos.

El gran colapso

Una de las cosas más desconcertantes de trabajar con flotadores es cómo pueden afectar al elemento que los contiene (su elemento "padre"). Si un elemento padre no contiene nada más que elementos flotantes, su altura se reduce a nada. Esto no siempre es obvio si el padre no contiene ningún fondo visualmente perceptible, pero es importante tenerlo en cuenta.

Por contradictorio que parezca colapsar, la alternativa es peor. Considere este escenario:

Si el elemento de bloque en la parte superior se expandiera automáticamente para acomodar el elemento flotante, tendríamos una ruptura de espacio no natural en el flujo de texto entre párrafos, sin una forma práctica de arreglarlo. Si este fuera el caso, los diseñadores nos quejaríamos mucho más por este comportamiento que por el colapso.

Casi siempre es necesario solucionar el colapso para evitar un diseño extraño y problemas entre navegadores. Lo arreglamos limpiando el flotador después de los elementos flotantes en el contenedor pero antes del cierre del contenedor.

Técnicas para limpiar flotadores

Si se encuentra en una situación en la que siempre sabe cuál será el elemento siguiente, puede aplicar el clear: both;valor a ese elemento y continuar con su negocio. Esto es ideal, ya que no requiere trucos sofisticados ni elementos adicionales, lo que lo hace perfectamente semántico. Por supuesto, las cosas no suelen funcionar de esa manera y necesitamos tener más herramientas de limpieza flotante en nuestra caja de herramientas.

• El método Empty Div es, literalmente, un div vacío. . A veces verá que se
usa un elemento o algún otro elemento aleatorio, pero div es el más común porque no tiene un estilo predeterminado del navegador, no tiene ninguna función especial y es poco probable que tenga un estilo genérico con CSS. Este método es despreciado por los puristas semánticos, ya que no tiene un significado contextual para la página y está ahí únicamente para la presentación. Por supuesto, en el sentido más estricto, tienen razón. Pero hace el trabajo y no hace daño a nadie.
• El método de desbordamiento se basa en establecer la overflowpropiedad CSS en un elemento principal. Si esta propiedad se establece en autoo hiddenen el elemento padre, el padre se expandirá para contener los flotantes, borrándolo efectivamente para los elementos siguientes. Este método puede ser maravillosamente semántico, ya que puede que no requiera elementos adicionales. Sin embargo, si se encuentra agregando un nuevo divsolo para aplicar esto, es tan poco semántico como el divmétodo vacío y menos adaptable. También tenga en cuenta que la propiedad de desbordamiento no es específicamente para limpiar flotadores. Tenga cuidado de no ocultar contenido o activar barras de desplazamiento no deseadas.
• El método Easy Clearing (también conocido como "clearfix") utiliza un pseudo selector CSS inteligente ( :after) para borrar los flotantes. En lugar de establecer el desbordamiento en el padre, le aplica una clase adicional como "clearfix". Luego aplica este CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Esto aplicará un poco de contenido, oculto a la vista, después del elemento padre que borra el flotante. Esta no es toda la historia, ya que es necesario utilizar código adicional para adaptarse a los navegadores más antiguos. Nota: Consulte también este fragmento que realiza un seguimiento de lo último y lo mejor en clearfixes, incluido el nuevo "micro clearfix".

Diferentes escenarios requieren diferentes métodos de compensación flotante. Tomemos, por ejemplo, una cuadrícula de bloques, cada uno de diferentes tipos.

Para conectar mejor visualmente los bloques similares, queremos comenzar una nueva fila como nos plazca, en este caso cuando cambia el color. Podríamos usar el método de desbordamiento o de limpieza fácil si cada uno de los grupos de colores tuviera un elemento principal. O usamos el método div vacío entre cada grupo. Tres divs de envoltura que no existían previamente o tres divs posteriores que no existían previamente. Dejaré que decidas cuál es mejor.

Problemas con los flotadores

Los flotadores a menudo son golpeados por ser frágiles. La mayor parte de esta fragilidad provino de errores en IE6 e IE7. A medida que esos navegadores se desvanecen en el pasado, estos errores se desvanecen junto con ellos. Pero vale la pena comprenderlos si alguna vez necesita depurar un "OldIE".

• El empuje hacia abajo es un síntoma de que un elemento dentro de un elemento flotante es más ancho que el propio flotador (generalmente una imagen). La mayoría de los navegadores renderizarán la imagen fuera del flotador, pero la parte que sobresale no afectará a otro diseño. Las versiones antiguas de IE expandieron el flotante para contener la imagen, lo que a menudo afectaba drásticamente el diseño. Un ejemplo común es una imagen que sobresale del contenido principal y empuja la barra lateral hacia abajo.
  

  

  Solución rápida: asegúrese de no tener ninguna imagen que haga esto, use overflow: hidden;para cortar el exceso.

• Error de margen doble : otra cosa para recordar cuando se trata de IE 6 es que si aplica un margen en la misma dirección que el flotante, duplicará el margen. Solución rápida: configúrelo display: inlineen el flotador y no se preocupe, seguirá siendo un elemento a nivel de bloque.
• El Jog de 3px es cuando el texto que está junto a un elemento flotante es misteriosamente pateado por 3px como un extraño campo de fuerza alrededor del flotador. Solución rápida: establezca un ancho o alto en el texto afectado.
• En IE 7, el error del margen inferior era cuando, si un padre flotante tenía hijos flotantes dentro de él, el padre ignoraba el margen inferior de esos hijos. Solución rápida: usar relleno inferior en el padre en su lugar.

Alternativas

Si necesita texto envuelto alrededor de imágenes, realmente no hay alternativas para flotar. Hablando de eso, echa un vistazo a esta técnica bastante inteligente para envolver texto alrededor de formas irregulares. Pero para el diseño de página, definitivamente hay opciones. Eric Sol tiene un artículo sobre A List Apart, Faux Absolute Positioning, que describe una técnica muy interesante que de muchas maneras combina la flexibilidad de los flotadores con la fuerza del posicionamiento absoluto.

CSS3 aborda el diseño de la página de dos maneras:

• Flexbox
• Diseño de varias columnas
• Diseño de cuadrícula

Se discutieron los flotadores absolutamente posicionados (por ejemplo, usted se coloca absolutamente como normal, pero el elemento aún puede afectar a otros elementos, como tener texto envuelto alrededor), pero creo que la idea se archivó debido a similitudes con otras ideas de diseño más robustas.

Video

Hice un screencast hace un tiempo explicando muchos de estos conceptos flotantes.

Relacionado

• clear
• position

Más información

• float en la especificación W3C
• float en MDN

Soporte del navegador

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Todos	Todos	Todos	Todos	Todos	Todos	Todos