¿Qué hacen realmente las carrozas de todos modos? ¿Cómo afectan al modelo de caja de los elementos involucrados? ¿En qué se diferencian los elementos flotados de los elementos en línea? ¿Cuáles son las reglas específicas que gobiernan la posición de los elementos flotantes? ¿Cómo funciona la propiedad clara y para qué sirve?
Los flotadores pueden hacer tropezar a los desarrolladores más experimentados y entender su comportamiento puede liberarte de muchos de los problemas que enfrentas con CSS. Incluso si crees que ya sabes todo sobre flotadores, ¡nos sumergiremos lo suficiente como para que puedas aprender algo nuevo!
¿Qué es un flotador?
Algunos elementos en CSS son elementos de nivel de bloque, lo que significa que comienzan automáticamente una nueva línea. Por ejemplo, si crea dos elementos de párrafos de una sola palabra, no fluirán entre sí, sino que aparecerán en líneas separadas. Otros elementos son elementos en línea. Esto significa que aparecen? En línea? Con el contenido anterior. Un ejemplo es una etiqueta de anclaje, que puede aparecer dentro de otro elemento, como un párrafo, sin que se produzcan espacios en blanco adicionales o nuevas líneas.
Una forma de engañar a este modelo de diseño es usar flotadores, que permiten que un elemento dado se desplace a un lado de su línea y haga que otros contenidos fluyan de lado. Un elemento flotado a la derecha se empujará completamente hacia la derecha de su contenedor y el contenido fluirá hacia abajo por su lado izquierdo y un elemento flotante hacia la izquierda se empujará completamente hacia el lado izquierdo y el contenido fluirá hacia abajo a su lado derecho.
El ejemplo clásico es cuando arrojas una imagen con un párrafo y quieres que las dos aparezcan una al lado de la otra en lugar de apilarse. Primero creamos ambos elementos con algo de HTML:
Con este código en su lugar, nuestra imagen se desplaza hacia el lado derecho de su línea y se permite que el párrafo fluya por su lado izquierdo. Haga clic aquí o en la imagen de abajo para ver y modificar un ejemplo en vivo de este código en acción.
Una cosa interesante sobre el comportamiento de esta imagen ahora que está flotando es que nuestro otro contenido intentará envolverlo cuando sea posible. Si cambiamos el tamaño de nuestro contenedor o ventana del navegador para que sea más estrecho, el texto simplemente se vuelve a reflejar para que nunca toque la imagen.
Cómo funciona la caja
Lo más probable es que ya haya entendido este comportamiento en un grado decente. Sin embargo, para poder manejar los flotadores adecuadamente, debe comprender cómo estos dos elementos interactúan en un nivel más profundo. Por ejemplo, ¿cómo agregamos un margen extra entre el párrafo y la imagen? Podrías pensar que esto funcionará:
Sin embargo, esto no pondrá ni un solo píxel de espacio extra entre la imagen y el párrafo. En cambio, tenemos que aplicar nuestro margen a la imagen:
La pregunta que debe hacerse es, "¿por qué?" ¿Por qué el aumento del margen del párrafo no aumentaría el espacio entre la imagen y el párrafo? La razón es que estamos fallando en comprender el modelo de caja en lo que se refiere a ese párrafo.
Si alguna vez tiene dudas sobre cómo funciona su diseño en un nivel básico, intente aplicar uno o dos bordes para ver qué está pasando. Si usamos esta técnica en el párrafo, el resultado puede sorprenderlo.
Como puede ver, la imagen está realmente dentro del cuadro del párrafo. Esto resuelve nuestro acertijo de margen. Cualquier margen que agreguemos al párrafo se está aplicando a la derecha de la imagen, por eso no aumenta el espacio entre la imagen y el párrafo.
Si quisiéramos cambiar este comportamiento para que el párrafo no se ajuste a la imagen, podríamos hacer que el párrafo flotara hacia la izquierda y darle un ancho específico (sin expresar el ancho, el párrafo es 100% ancho y no encajará junto a la imagen).
Reglas de Flotador Loco
Ahora sabemos qué es un flotador y cómo afecta a las cajas de los elementos que están involucrados. Vayamos a otra información que muchos desarrolladores probablemente no comprenden: las reglas que gobiernan la posición de un elemento flotante.
Es frecuente que los desarrolladores utilicen flotadores para controlar la posición de los elementos de la lista, tal vez en una galería de imágenes o en una lista de características. Veamos cómo funciona esto creando una lista simple llena de imágenes.
Para empezar, este ejemplo es diferente en el hecho de que las imágenes están predeterminadas en un estado de alineación vertical en sus bordes inferiores. Esto hace que se vean muy diferentes de nuestro ejemplo anterior, pero podemos solucionarlo con una sola línea de CSS.
Ahora estamos empezando a parecernos mucho al ejemplo flotante, solo mostrar los elementos de la lista en línea tiene un orden de apilamiento mucho más predecible. Cuando no hay espacio en el eje x para el siguiente elemento, comienza de nuevo en la diapositiva izquierda en la siguiente línea.
Entonces, ¿por qué nuestra galería de imágenes flotantes no funciona así? ¿Qué extraño vudú gobierna los artículos flotados?
Traducción requerida
Resulta que, la especificación de CSS describe una lista de nueve reglas que rigen el comportamiento de los flotadores. Sin embargo, el problema con esta lista es que fue escrito para que solo los abogados y otras personas aburridas puedan entenderlo. Aquí hay una cita directa de una de las reglas:
? Si el cuadro actual está flotando a la izquierda, y hay cuadros flotantes a la izquierda generados por elementos anteriores en el documento de origen, entonces para cada cuadro anterior, el borde exterior izquierdo del cuadro actual debe estar a la derecha del el borde exterior derecho del cuadro anterior, o su parte superior debe ser inferior a la parte inferior del cuadro anterior. Reglas análogas se aplican a las cajas flotantes a la derecha.Tal vez su comprensión de lectura sea más alta que la mía, pero esta y las otras reglas en la lista hicieron que mi cabeza diera vueltas. Toda esta conversación de que el borde exterior izquierdo está a la derecha del borde exterior derecho es en realidad cosas bastante básicas vestidas para sonar complicadas. Para simplificar las cosas, aquí están las nueve reglas de Josh Johnson para el comportamiento de flotación, traducidas al inglés para su conveniencia.
- Los elementos flotados son empujados al borde de sus contenedores, no más allá.
- Cualquier elemento flotado aparecerá al lado o debajo de un elemento flotante anterior. Si los elementos están flotando a la izquierda, el segundo elemento aparecerá a la derecha del primero. Si están flotando a la derecha, el segundo elemento aparecerá a la izquierda del primero.
- Una caja flotante a la izquierda no puede estar más a la derecha que una caja flotante a la derecha.
- Los elementos flotantes no pueden ir más alto que el borde superior de su contenedor (esto se complica más cuando se trata de márgenes colapsados, vea la regla original).
- Un elemento flotado no puede ser más alto que un elemento de nivel de bloque anterior o flotado.
- Un elemento flotante no puede ser más alto que una línea anterior de elementos en línea.
- Un elemento flotante al lado de otro elemento flotante no puede sobresalir más allá del borde de su contenedor.
- Una caja flotante debe colocarse lo más alto posible. (No se requiere traducción)
- Una caja flotante a la izquierda debe colocarse lo más a la izquierda posible, una caja flotante a la derecha lo más a la derecha posible. Se prefiere una posición más alta sobre una que está más a la izquierda / derecha. (No se requiere traducción)
Aquí podemos ver que muchos de estos son bastante sentido común, pero se deben establecer explícitamente para que cada persona y navegador estén en la misma página. Básicamente, la esencia de la situación es que los elementos flotantes van hasta el borde especificado (izquierdo o derecho), pero no más allá. A menos que, por supuesto, haya otro elemento flotante delante de él, en cuyo caso simplemente va al lado de ese elemento flotante.
La verdadera sorpresa que nos confundió antes viene con las reglas al final, el estado en el que los elementos flotantes intentan mantenerse lo más alto posible y que esta regla de posicionamiento vertical tiene prioridad sobre la regla de flotación horizontal izquierda / derecha que empuja un elemento hacia un borde .
En nuestro ejemplo anterior, la imagen número dos estiró la altura de la línea hacia abajo para que después de la imagen número tres, aún quedara algo de espacio vertical para que la imagen número cuatro se comprimiera. Incluso con estas reglas en mente, el patrón no siempre es fácil de predecir.
Solo ten en cuenta que cuando tienes un elemento flotante, los siguientes elementos flotantes detrás de él ocuparán al menos la misma cantidad de espacio vertical o más Antes de romper la línea y bajar en el flujo.
Orden de flotación
Una última nota sobre las reglas que hemos establecido aquí. La segunda regla tiene algunas implicaciones interesantes para el orden de los elementos que se flotan. Digamos que nuevamente tenemos una lista de imágenes numeradas del uno al seis, como esta:
Lo que hace este código es decirle al navegador que la parte superior del segundo elemento de la lista debe estar debajo de la parte inferior de cualquier elemento flotante a la izquierda antes de él (en este caso, el primer elemento de la lista). Si todos hubiéramos flotado todos estos elementos a la derecha, habríamos tenido que usar claro: ¿verdad? en lugar.
Observe que después de esto, el resto de los elementos flotados mantienen su curso. Esto se debe a que todavía están configurados para flotar a la izquierda, la propiedad clear no cancela esto de alguna manera. Esto significa que nuestro problema con el párrafo no se soluciona al borrar cualquiera de los elementos de la lista.
En su lugar, lo que tiene que suceder es que el elemento de párrafo, que es un elemento de nivel de bloque que no se ha flotado, debe borrarse. Esto asegurará que aparezca debajo de los elementos flotados en lugar de junto a ellos.
Técnicamente, solo necesitábamos dejarlo en claro aquí, pero cuando un desarrollador quiere asegurarse de eliminar todos los flotadores, es una práctica común ver los ambos Valor utilizado. Este cambio solucionó nuestro problema muy bien!
Flotantes y arreglos claros
Hay una acción peculiar que tiene lugar cuando un elemento dado contiene solo elementos flotantes: la altura del elemento padre se colapsa. Para ilustrar esto, digamos que queríamos poner un color de fondo en la lista desordenada que hemos estado usando en todos nuestros ejemplos. Si los elementos de la lista no están flotando, entonces solo necesitamos aplicar el color al fondo usando CSS.
Como puede ver en el ejemplo a continuación, el cuadro que define la lista desordenada se ha vuelto gris y los elementos de la lista se apilan uno encima del otro.
Sin embargo, lo segundo que flotamos esos elementos de la lista, que UL solo contiene elementos flotantes, y así su altura se colapsa, dejando a un desarrollador novato preguntándose qué diablos pasó con su color de fondo.
Hay varias maneras de resolver este problema. La solución más fácil y sencilla es simplemente aplicar una altura explícita al elemento padre, que es la lista desordenada.
Como se puede ver, esto nos dio nuestra información de fondo. Sin embargo, esto rara vez es el curso deseable simplemente porque es más conveniente a largo plazo si la altura se calcula automáticamente en función del contenido. Si agregamos tres filas más de imágenes a nuestra lista ahora, esa altura no será adecuada.
Clearfix para el rescate
Aquí es donde el término? Aclarar solución ,? también escrito? clearfix ,? entra en juego. Los arreglos claros solucionan este problema de altura colapsable tradicionalmente mediante el uso de claro propiedad.
Lo que los desarrolladores solían hacer es crear un elemento vacío (a menudo un div) en su HTML en el mismo nivel que los elementos flotantes, luego aplicar una clase de? Clearfix? a ese contenedor vacío. De vuelta en CSS, a continuación, agregará clear the floats en el? Clearfix? propiedad.
Esto corrige inmediatamente el problema de la altura colapsada:
Dado lo que ya hemos aprendido, sabemos exactamente por qué este truco solucionó nuestro problema. La razón por la que se colapsó la altura es porque el padre solo contenía hijos flotantes. Ahora tiene un hijo, aunque está vacío, que no flota, por lo que la altura automática funciona como se espera de nuevo.
El problema con este método es que a nadie le gustó ese elemento extra feo en el HTML. Simplemente no era semántico, lo que significa que no ayudaba a comunicar la clara jerarquía de la página.
La nueva solución sofisticada para este problema es aprovechar las ventajas de rebosar propiedad, que rige la funcionalidad del contenido que se extiende más allá de los límites de su caja contenedora. Resulta que si configura desbordamiento a oculto o auto en el elemento padre, corrige el colapso de altura!
Esta es definitivamente la solución más breve y elegante para solucionar el problema de la altura colapsada y debe ser su estrategia a seguir. Dicho esto, habrá casos en los que desee que el desbordamiento de un elemento se configure en visible, que deberias hacer entonces?
La respuesta es usar el Micro Clearfix Hack de Nick Gallagher, que usa algunos genios CSS para solucionar este problema. Primero, usa: antes y: después para agregar un contenido que podemos usar para crear algo en el padre que no está flotando. Sin embargo, realmente no desea contenido aquí, por lo tanto, lo dejamos vacío, pero configuramos la pantalla en la tabla para crear una celda anónima (vacía y no ocupa espacio) y, finalmente, utilizamos a nuestro viejo amigo. Esto crea el elemento de nivel de bloque invisible que necesitamos para corregir el colapso de altura sin marcas HTML adicionales. Las versiones anteriores de IE requieren su propia solución, por lo que también se incluye.
Conclusión
En este artículo, repasamos una tonelada De gran información, tanto básica como complicada. Comenzamos con una discusión de qué son las flotillas y cómo funcionan en un nivel básico, luego procedimos a ver cómo la configuración de un elemento para flotar afecta los recuadros limítrofes de los elementos involucrados para que pueda averiguar correctamente cómo hacer que funcionen sus márgenes. usted quiere que ellos
A continuación, pasamos a las reglas básicas que gobiernan la posición de un elemento flotado y llegamos a algunas conclusiones interesantes sobre cómo se posicionarán los elementos flotantes de diferentes alturas y cómo los elementos flotantes de la derecha aparecen en orden inverso.
Finalmente, presentamos claramente la historia completa de cómo un padre que solo tiene hijos flotantes tendrá una altura colapsada y cómo puede resolverlo en función de su situación particular.
Si las carrozas fueron algo que te confundió antes de leer este artículo, únete al club. Nos confunden a todos al principio. Esperemos que ahora tenga un conocimiento excepcional de cómo funcionan los flotadores y cómo puede usarlos para lograr el diseño que desee. Deje un comentario a continuación y háganos saber si esta información le resultó útil.