Capítulo 4

Este cápitulo habla sobre:

Cómo funcionas los floats y cómo evitar errores comunes
Contenedor colapsando y el clearfix
El objeto multimedia y el patrón de contenedor doble
Contextos de formato de bloque
Cómo construir y comprender un grid system

Al final de la parte 1, cubrimos algunos conceptos fundamentales de tamaño y espaciado de elementos. A lo largo de la parte 2, nos basaremos en estos conceptos analizando más de cerca los métodos principales para diseñar la página. Veremos los tres métodos más importantes para alterar el flujo de documentos: floats, flexbox y grid. Luego, veremos el posicionamiento, que se usa principalmente para apilar elementos uno frente al otro. Los diseños de flexbox y grid son nuevos en CSS y están demostrando ser herramientas esenciales. Aunque los floats y el posicionamiento no son nuevos, a menudo se malinterpretan.

En este capítulo, primero veremos los floats. Son el método más antiguo para diseñar una página web y durante muchos años fueron la única forma. Sin embargo, son un poco extraños. Dar sentido a los floats comienza con la comprensión de su propósito original, que es donde comenzaremos. Le mostraré cómo lidiar con algunas de sus peculiaridades, incluida una herramienta llamada clearfix. Esto pondrá algo de contexto a su comportamiento.

A medida que avanzamos, también aprenderá acerca de dos patrones que a menudo puede ver en los diseños de página: el patrón de double container y el media object. Para terminar, pondrás tus conocimientos en práctica para crear un sistema de cuadrícula, que es una herramienta versátil para estructurar una página.

4.1 EL PROPOSITO DE LOS FLOATS

Aunque los floats no estaban destinados originalmente a construir diseños de página, han cumplido bien ese trabajo. Sin embargo, para dar sentido a los floats, primero debemos tener en cuenta su propósito original.

Un float tira de un elemento (a menudo una imagen) hacia un lado de su contenedor, permitiendo que el flujo de documentos lo envuelva (figura 4.1). Este diseño es común en periódicos y revistas, por lo que se agregaron floats a CSS para lograr este efecto.

ibid — Figura 4.1. Las líneas de texto se envuelven alrededor de elementos flotantes

Esta ilustración muestra un elemento tirado hacia la izquierda, pero también puede flotar un elemento hacia la derecha. Un elemento flotante se retira del flujo normal de documentos y se tira hacia el borde del contenedor. Luego, el flujo de documentos se reanuda, pero rodeará el espacio donde ahora reside el elemento flotante. Si hace flotar varios elementos en la misma dirección, se apilarán uno al lado del otro, como se muestra en la figura 4.2.

Si ha estado escribiendo CSS por un tiempo, este comportamiento probablemente no sea nuevo para usted. Pero lo importante a tener en cuenta es esto: no siempre usamos floats de esta manera, a pesar de que es su propósito original.

En los primeros días de CSS, los desarrolladores se dieron cuenta de que podían usar esta sencilla herramienta para mover secciones de la página y crear todo tipo de diseños. No tenía la intención de ser una herramienta de diseño de página, pero durante casi dos décadas, la hemos estado usando como tal.

Hicimos esto porque era nuestra única opción. Finalmente, surgió la capacidad de usar display: inline-block o display: table, que ofrecía alternativas, aunque limitadas. Hasta la adición de los diseños de grid y flexbox en los últimos años, los floats siguieron siendo nuestro gran éxito para el diseño de página. Echemos un vistazo a cómo funcionan. Como guía, creará la página que se muestra en la figura 4.3.

En los ejemplos de este capítulo, utilizará flotantes para colocar cada uno de los cuatro cuadros grises. Dentro de los cuadros, colocará las imágenes junto al texto. Cree una página en blanco y vincúlela a una nueva hoja de estilo, luego agregue el código en esta lista a su página.

        
<body>
  <div class="container">
    <header>                                     1           
      <h1>Franklin Running Club</h1>       1          
    </header>                                    1                
  
    <main class="main clearfix">                 2               
        <h2>Running tips</h2>
  
      <div>
        <div class="media">                      3               
          <img class="media-image" src="runner.png">
          <div class="media-body">
            <h4>Strength</h4>
            <p>
              Strength training is an important part of
              injury prevention. Focus on your core—
              especially your abs and glutes.
            </p>
          </div>
        </div>
  
        <div class="media">                      3         
          <img class="media-image" src="shoes.png">
          <div class="media-body">
            <h4>Cadence</h4>
            <p>
              Check your stride turnover. The most efficient
              runners take about 180 steps per minute.
            </p>
          </div>
        </div>
  
        <div class="media">                         3          
          <img class="media-image" src="shoes.png">
          <div class="media-body">
            <h4>Change it up</h4>
            <p>
              Don't run the same every time you hit the
              road. Vary your pace, and vary the distance
              of your runs.
            </p>
          </div>
        </div>
  
        <div class="media">                         3           
          <img class="media-image" src="runner.png">
          <div class="media-body">
            <h4>Focus on form</h4>
            <p>
              Run tall but relaxed. Your feet should hit
              the ground beneath your hips, not out in
              front of you.
            </p>
          </div>
        </div>
  
      </div>
    </main>
  </div>
</body>
        
        Listado 4.1. HTML para una página con un diseño float

Diseño de encabezado similar al del capítulo 3
Elemento principal, el cuadro blanco, que contiene la mayor parte de la página.
Cuatro objetos multimedia para cada uno de los cuadros grises

Este listado le brinda la estructura de la página: un encabezado y un elemento principal que contendrá el resto de la página. Dentro del elemento principal está el título de la página, seguido de un div anónimo (es decir, un div sin clase o ID). Esto sirve para agrupar los cuatro elementos multimedia grises, cada uno de los cuales contiene una imagen y un cuerpo.

Por lo general, es más fácil diseñar primero las regiones grandes de una página y luego avanzar hacia los elementos más pequeños que contiene.

Antes de comenzar con los elementos flotantes, colocará la estructura exterior de la página en su lugar. Agregue la siguiente lista a su hoja de estilo.

        
:root {                             1
  box-sizing: border-box;           1
}                                   1
                                    1
*,                                  1
::before,                           1
::after {                           1
  box-sizing: inherit;              1
}                                   1
  
body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
  
body * + * {                        2
  margin-top: 1.5em;                2
}                                   2
  
header {                            3
  padding: 1em 1.5em;               3
  color: #fff;                      3
  background-color: #0072b0;        3
  border-radius: .5em;              3
  margin-bottom: 1.5em;             3
}                                   
  
.main {                             4
  padding: 0 1.5em;                 4
  background-color: #fff;           4
  border-radius: .5em;              4
}
        
        Listado 4.2. Estilos base para la página

Corrección de cuadro de borde global (del capítulo 3)
Márgenes globales del búho lobotomizado (del capítulo 3)
colores de encabezado y relleno
4 colores principales (contenedor blanco) y relleno

Esto establece algunos estilos base para la página, incluida una corrección de tamaño de caja y un búho lobotomizado del capítulo 3. A continuación, querrá restringir el ancho del contenido de la página, que se muestra en la figura 4.4. Observe los márgenes de color gris claro en ambos lados y cómo tanto el encabezado como el contenedor principal tienen anchos iguales en su interior.

Este diseño es común para centrar el contenido en una página. Puede lograrlo colocando su contenido dentro de dos contenedores anidados y luego establecer márgenes en el contenedor interno para colocarlo dentro del externo (figura 4.5). El desarrollador web Brad Westfall llama a esto el patrón de contenedor doble.

En nuestro ejemplo, <body> sirve como contenedor externo. De forma predeterminada, esto ya es el 100% del ancho de la página, por lo que no tendrá que aplicarle ningún estilo nuevo. Dentro de eso, has envuelto todo el contenido de la página en un <div class = "contenedor">, que sirve como contenedor interno. Para eso, aplicará un max-widht y márgenes automáticos para centrar el contenido. Agregue este listado a su hoja de estilo.

        
.container {
  max-width: 1080px;         1   
  margin: 0 auto;            2   
}
        
        Listado 4.3. Estilos para el contenedor doble

Establece un ancho máximo de 1.080 px
Los márgenes izquierdo y derecho automáticos crecerán para llenar el espacio disponible, centrando el elemento dentro del contenedor exterior.

Al usar el max-widht en lugar del ancho, el elemento se reduce a menos de 1080px si la ventana gráfica de la pantalla es más pequeña que eso. Es decir, en las ventanas gráficas más pequeñas, el contenedor interno llenará la pantalla, pero en las más grandes, se expandirá a 1080px. Esto es importante para evitar el desplazamiento horizontal en dispositivos con pantallas más pequeñas.

Flexbox está reemplazando rápidamente el uso de floats para el diseño de páginas. Su comportamiento es sencillo y, a menudo, más predecible para los nuevos desarrolladores. Es posible que se pregunte si necesita saber algo sobre float. ¿CSS ha superado esto?

Con los navegadores modernos, ciertamente puede ir mucho más lejos sin floats de lo que podía en el pasado. Probablemente pueda arreglárselas sin floats. Pero si necesita ser compatible con Internet Explorer, es posible que no desee dejarlos de lado todavía. Flexbox solo es compatible con IE 10 y 11, e incluso entonces tiene algunos errores. Si no quiere preocuparse por los errores del navegador o necesita admitir navegadores más antiguos, los floats podrían ser una mejor opción.

Y los flotadores siguen siendo la única forma de mover una imagen al costado de la página y permitir que el texto la rodee.

4.2. CONTENEDOR COLAPSANDO Y CLEARFIX

En el pasado, los errores del navegador han plagado el comportamiento de los floats, aunque principalmente en IE 6 y 7. Es casi seguro que ya no necesita ser compatible con estos navegadores, por lo que no necesita preocuparse por esos errores. Ahora puede confiar en que los navegadores manejarán floats de manera consistente.

Sin embargo, algunos comportamientos de los floats pueden tomarlo desprevenido. Estos no son errores, sino floats que se comportan exactamente como se supone que deben comportarse. Veamos cómo funcionan y cómo puede ajustar su comportamiento para lograr el diseño que desea.

4.2.1. Entender el colapso de contenedores

En su página, hagamos flotar los cuatro cuadros de medios a la izquierda. Los problemas se harán evidentes de inmediato (figura 4.6).

¿Qué pasó con el fondo blanco? Lo vemos detrás del título de la página ("Trucos para correr"), pero se detiene allí en lugar de extenderse hacia abajo para abarcar los cuadros de medios. Para ver esto en su página, agregue la siguiente lista a su hoja de estilo. Luego, veremos por qué sucede esto y cómo puede solucionarlo.

        
.media {
  float: left;                 1
  width: 50%;                  2
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}
        
        Listado 4.4. Flotando las cuatro cajas de medios a la izquierda

Flota cada caja de medios a la izquierda
Establece un ancho para que quepan dos cuadros en la página.

Ha establecido un fondo gris claro en cada cuadro de medios, esperando ver el fondo blanco del contenedor detrás (o mejor dicho, alrededor) de ellos. En cambio, el fondo blanco se detuvo encima de la fila superior de cajas de medios. ¿Por qué es esto?

El problema es que, a diferencia de los elementos del flujo de documentos normal, los elementos flotantes no añaden altura a sus elementos principales. Esto puede parecer extraño, pero se remonta al propósito original de los floats.

Como aprendió cerca del comienzo de este capítulo, los floats están pensados para permitir que el texto los envuelva. Cuando flota una imagen dentro de un párrafo, el párrafo no crece para contener la imagen. Esto significa que si la imagen es más alta que el texto del párrafo, el siguiente párrafo comenzará inmediatamente debajo del texto del primero y el texto de ambos párrafos se ajustará al flotante. Esto se ilustra en la figura 4.7.

En su página, todo lo que está dentro del elemento principal está flotando, excepto el título de la página, por lo que solo el título de la página contribuye a la altura del contenedor, dejando todos los elementos multimedia flotantes que se extienden debajo del fondo blanco del principal. Este no es el comportamiento que queremos, así que vamos a arreglarlo. El elemento principal debe extenderse hacia abajo para contener los cuadros grises (que se muestran en la figura 4.8).

Una forma de corregir esto es con la propiedad complementaria del float, clear. Si coloca un elemento al final del contenedor principal y usa clear, hace que el contenedor se expanda hasta el fondo de los floats. El código del siguiente listado muestra, en principio, lo que queremos hacer. Puede agregar esto a su página temporalmente para ver cómo funciona.

        
<main class="main">
  ...
  <div style="clear: both"></div>    1
</main>
        
        Listado 4.5. El contenedor se extiende para contener un elemento que limpia los floats.

Agrega un div vacío con un claro al final del contenedor principal

La declaración clear: both hace que este elemento se mueva debajo de la parte inferior de los elementos flotantes, en lugar de al lado de ellos. Puede asignar a esta propiedad el valor left o right para borrar solo los elementos flotantes hacia la izquierda o hacia la derecha, respectivamente. Debido a que este div vacío en sí mismo no está flotando, el contenedor se extenderá para abarcarlo, por lo que también contiene los flotadores sobre él.

Esto mide el tamaño del contenedor como quieras, pero es bastante hacky; está agregando marcas no deseadas a su HTML para hacer el trabajo que debería realizar el CSS. Continúe y elimine ese div vacío. Veamos una forma de lograr esto únicamente en su CSS.

4.2.2. Entendiendo el clearfix

En lugar de agregar un div adicional a su marcado, usará un pseudo-elemento. Al usar el selector de pseudo-elemento :: after, puede insertar efectivamente un elemento en el DOM al final del contenedor, sin agregarlo al marcado.

pseudoelemento: selectores especiales que se dirigen a determinadas partes del documento. Estos comienzan con una sintaxis de dos puntos (::), aunque la mayoría de los navegadores también admiten una sintaxis de dos puntos simples para compatibilidad con versiones anteriores. Los pseudoelementos más comunes son ::before y ::after, que se utilizan para insertar contenido al principio o al final de un elemento. Consulte el apéndice A para obtener más información.

El listado 4.6 muestra un enfoque común al problema de contener floats, llamado clearfix. (A algunos desarrolladores les gusta abreviar el nombre de la clase a cf, que convenientemente también es una abreviatura de “contener flotantes”). Agregue esto a su hoja de estilo.

        
.clearfix::after {      1     
  display: block;       2     
  content: " ";         2    
  clear: both;          3    
}
        
        Listado 4.6. Usando clearfix para contener floats

Apunta al pseudo-elemento al final del contenedor
Un valor de visualización no en línea y un valor de contenido hacen que el pseudoelemento aparezca en el documento.
Hace que el pseudoelemento borre todos los flotadores del contenedor.

Es importante saber que clearfix se aplica al elemento que contiene los floats; un error común es aplicarlo al elemento equivocado, como los floats o el contenedor después del que los contiene.

El clearfix ha pasado por docenas de iteraciones a lo largo de los años, algunas más complicadas que otras. Muchas versiones tenían matices para corregir varios errores del navegador. La mayoría de las soluciones alternativas ya no son necesarias, aunque este ejemplo tiene una solución alternativa: el espacio en el valor del contenido. Una cadena vacía ("") también funciona, pero el carácter de espacio agregado corrige un error oscuro en versiones anteriores de Opera. Tiendo a dejar esta solución porque es discreta.

Queda una inconsistencia con este clearfix: los márgenes de los elementos flotantes en el interior no colapsarán hacia el exterior del contenedor clearfixed; pero los márgenes de los elementos no flotantes colapsarán normalmente. Puede ver esto en su página donde el encabezado “Consejos para correr” se presiona directamente contra la parte superior del <main> blanco (figura 4.8); su margen se ha derrumbado fuera del contenedor.

Algunos desarrolladores prefieren usar una versión modificada de clearfix que contendrá todos los márgenes porque puede ser un poco más predecible. Agregar esta versión a su página evitará que el margen superior del título de la página se contraiga fuera del principal, como se muestra en la figura 4.9, dejando el espacio apropiado encima del encabezado.

Para la versión modificada, actualice el clearfix en su hoja de estilo para que coincida con esta lista.

        
.clearfix::before,        1
.clearfix::after {        1
  display: table;         2
  content: " ";
}
  
.clearfix::after {        3
  clear: both;            3
}                         3
        
        Listado 4.7. Modificación de clearfix para contener todos los márgenes

Hace que aparezcan los pseudo elementos :: before y :: after
Evita que los márgenes colapsen a través de los pseudoelementos
Solo el pseudo elemento :: after necesita borrar los flotantes.

Esta versión hace uso de display: table en lugar de display: block. Al aplicar esto a los pseudoelementos ::before y ::after, contendrá los márgenes de los elementos secundarios en la parte superior e inferior del contenedor. Consulte la barra lateral Clearfix y display: table para obtener una explicación más completa de por qué funciona.

Esta versión de clearfix también funciona como una forma útil de evitar que los márgenes colapsen donde no queremos.

La versión de clearfix que utilice en sus proyectos depende de usted. Algunos desarrolladores argumentan que el colapso de márgenes es una característica fundamental de CSS, por lo que prefieren no contener márgenes. Pero, debido a que ninguna de las versiones contiene los márgenes de los elementos flotantes, otros prefieren el comportamiento más consistente de la versión modificada. Cada argumento tiene su mérito.

El uso de display: table en clearfix contiene márgenes debido a algunas peculiaridades de CSS. La creación de un elemento de tabla de visualización (o, en este caso, un pseudo-elemento) crea implícitamente una fila de tabla dentro del elemento y una celda de tabla dentro de ella. Debido a que los márgenes no se colapsan a través de elementos de celda de tabla (como se menciona en el capítulo 3), tampoco se colapsarán a través de un pseudo elemento de tabla de visualización.

Entonces, podría parecer que podría usar display: table-cell para el mismo efecto. Sin embargo, la propiedad clear solo funciona cuando se aplica a elementos a nivel de bloque. Una tabla es un elemento a nivel de bloque, pero una celda de tabla no lo es; por lo tanto, la propiedad clear no se pudo aplicar junto con display: table-cell. Por lo tanto, debe usar display: table para borrar los floats y su celda de tabla implícita para contener los márgenes.

4.3 INESPERADO "FLOAT CATCHING"

Ahora que el contenedor blanco contiene los elementos multimedia flotantes en su página, se hace evidente otro problema: los cuatro cuadros multimedia no están dispuestos en dos filas iguales como usted desea. En cambio, los dos primeros cuadros ("Fuerza" y "Cadencia") están en una fila como se esperaba, pero el tercer cuadro ("Cambiarlo") está a la derecha, debajo del segundo cuadro. Esto deja un gran espacio debajo del primer cuadro, lo que sucede porque el navegador coloca los flotadores lo más alto posible. Consulte la figura 4.10 para ver un diagrama simplificado.

Dado que la casilla 2 es más corta que la casilla 1, hay espacio para la casilla 3 debajo. En lugar de limpiar la casilla 1, la casilla 3 "la atrapa" en ella. Es decir, no flota hasta el borde izquierdo, sino que flota contra la esquina inferior de la caja 1.

La naturaleza exacta de este comportamiento depende de las alturas de cada uno de los bloques flotantes. Incluso una diferencia de 1 px en la altura de los elementos puede causar este problema. Por otro lado, si el cuadro 1 es más corto que el cuadro 2, no habrá ningún borde para que el tercer cuadro se dé cuenta y no verá el problema hasta que el contenido cambie más tarde, lo que dará como resultado un cambio en la altura de los elementos.

Al hacer flotar una serie de elementos a un lado, puede terminar con una gran variedad de diseños, dependiendo de las alturas de cada caja. Incluso cambiar el ancho del navegador puede alterar las cosas, ya que esto afectará el ajuste de línea y cambiará las alturas de los elementos. En cambio, lo que desea ver en su página son dos cuadros flotantes por fila, como en la figura 4.11.

La solución para esto es simple: el tercer float necesita limpiar los floats sobre él. O, de manera más general, el primer elemento de cada fila debe borrar el float que está encima. Como sabe que tiene dos casillas por fila, necesitará los elementos impares para borrar la fila de arriba. Puede apuntar a estos con el selector de pseudo-clase :nth-child(). Agregue este conjunto de reglas a su hoja de estilo.

        
.media {
  float: left;
  width: 50%;
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}
  
.media:nth-child(odd) {       
  clear: left;                
}                             
        
        Listado 4.8. Usando el selector: nth-child () para apuntar a cada elemento multimedia impar

Cada nueva fila borra la fila de arriba

Este código funcionará incluso si agrega más elementos a la página más adelante. Se dirige al primer, tercer, quinto elemento, etc. Si, en cambio, tuviera tres elementos por fila, podría apuntar a cada tercio con el selector .media: nth-child (3n + 1). Consulte el apéndice A para obtener más información sobre el uso del selector :nth-child.

Esta técnica para borrar cada fila solo funciona cuando sabe cuántos elementos hay en cada fila. Si el ancho se define utilizando algo que no sea un porcentaje, el número de elementos puede variar, dependiendo del ancho de la ventana gráfica. En este caso, lo mejor que puede hacer es utilizar una técnica de diseño diferente, como flexbox o elementos inline-block.

También agreguemos márgenes a nuestros elementos de medios para proporcionar un margen entre ellos. El búho lobotomizado también agregará un margen superior a cada elemento excepto al primero. Esto desalinea los elementos en la fila superior, por lo que también deberá restablecer el margen superior en ellos. Actualice su hoja de estilo para que coincida con la siguiente lista.

        
.media {
  float: left;
  margin: 0 1.5em 1.5em 0;          1
  width: calc(50% - 1.5em);         2 
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}
  
.media:nth-child(odd) {
  clear: left;
}
        
        Listado 4.9. Agregar márgenes a los elementos multimedia

Agrega un margen derecho e inferior a cada elemento multimedia
Resta el margen del ancho para evitar un ajuste de línea no deseado

Al agregar márgenes correctos a los elementos, ya no se ajustarán a dos en una fila, por lo que tendrá que restar una cantidad igual del ancho del elemento usando calc().

4.4. OBJETOS DE MEDIOS Y CONTEXTOS DE FORMATO DE BLOQUES

Ahora que cada uno de los cuatro recuadros grises está distribuido, veamos su contenido. En nuestro diseño previsto, tenemos una imagen en un lado y un bloque de texto al lado (figura 4.12). Este es otro patrón común en los diseños de página, que la desarrolladora web Nicole Sullivan ha llamado el "objeto multimedia".

Este patrón se puede implementar de varias formas, incluidas las pantallas flexbox o table, pero lo haremos usando floats. El marcado de uno de los objetos multimedia en su página se ve así:

        
<div class="media">
  <img class="media-image" src="shoes.png">
  <div class="media-body">
    <h4>Change it up</h4>
    <p>
      Don't run the same every time you hit the
      road. Vary your pace, and vary the distance
      of your runs.
    </p>
  </div>
</div>

Agregué las clases media-image y media-body a las partes izquierda y derecha de cada objeto multimedia, que usarás para colocarlos. Empezarás flotando la imagen a la izquierda. Como puede ver (figura 4.13), simplemente hacer flotar la imagen no es suficiente. Cuando el texto es lo suficientemente largo, envuelve el elemento float. Este es el comportamiento de float normal, pero no es lo que queremos en este caso.

Agregue el listado 4.10 a su hoja de estilo para que su página coincida con la figura 4.13, luego veremos cómo puede solucionarlo. Este código también elimina los márgenes superiores del cuerpo del medio y el título que contiene.

        
.media-image {           1
  float: left;           1
}                        1
  
.media-body {            2
  margin-top: 0;         2 
}                        2
  
.media-body h4 {         3
  margin-top: 0;         3
}                        3
        
        Listado 4.10. Flotando la imagen del objeto multimedia a la izquierda

Imagen flotante a la izquierda
Elimina el margen superior aplicado por el búho lobotomizado
Anula el margen superior aplicado por los estilos de agente de usuario

Para corregir el comportamiento del texto, deberá comprender un poco más sobre cómo funcionan los floats.

4.4.1. Establecer un contexto de formato de bloque

Si examina el cuerpo del medio en las DevTools de su navegador (haga clic con el botón derecho y seleccione Inspeccionar o Inspeccionar elemento), verá que su cuadro se extiende completamente hacia la izquierda, por lo que envuelve la imagen flotante (figura 4.14, izquierda). El texto dentro del cuerpo envuelve la imagen, pero una vez que está fuera de la parte inferior de la imagen, se mueve completamente hacia la izquierda del cuadro. En cambio, lo que queremos es colocar el borde izquierdo del cuerpo del medio a la derecha de la imagen flotante (figura 4.14, derecha).

Para lograr el diseño de la derecha, deberá establecer algo llamado block-formatting-context para el cuerpo del medio. Un block-formatting-context (a veces llamado BFC) es una región de la página en la que se distribuyen los elementos. Un block-formatting-context en sí mismo es parte del flujo de documentos circundante, pero aísla su contenido del contexto externo. Este aislamiento hace tres cosas para el elemento que establece el BFC:

Contiene los márgenes superior e inferior de todos los elementos que contiene. No se colapsarán con márgenes de elementos fuera del block-formatting-context.
Contiene todos los elementos flotantes en su interior.
No se superpone con elementos flotantes fuera del BFC.

En pocas palabras, los contenidos dentro de un block-formatting-context no se superpondrán ni interactuarán con los elementos externos como se esperaría normalmente. Si aplica clear a un elemento, solo borrará los floats dentro de su propio BFC. Y, si fuerza a un elemento a tener un nuevo BFC, no se superpondrá con otros BFC.

Puede establecer un nuevo block-formatting-context de varias formas. La aplicación de cualquiera de los siguientes valores de propiedad a un elemento desencadena uno:

float: left o float: right, cualquier cosa menos ninguna
overflow: hidden, auto o scroll, cualquier cosa menos visible.
display: inline-block, table-cell, table-caption, flex, inline-flex, grid o inline-grid; estos se denominan contenedores de bloques.
position: absolute o position: fixed

El elemento raíz de la pagina también crea un block-formatting-context de nivel superior para la página.

4.4.2 Usar un block-formatting-context para diseños de objetos multimedia

Una vez que cada cuerpo de medios establece su propio block-formatting-context, su página tendrá el diseño que desea (figura 4.15). La mejor manera de hacer esto es a menudo establecer un valor de desbordamiento, ya sea oculto o automático.

Establezcamos el valor de desbordamiento en su hoja de estilo. Actualice la parte correspondiente de su hoja de estilo para que coincida con esta lista.

        
.media {
  float: left;
  margin: 0 1.5em 1.5em 0;
  width: calc(50% - 1.5em);
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}
  
.media:nth-child(odd) {
  clear: left;
}
  
.media-image {
  float: left;
  margin-right: 1.5em;         1
}
  
.media-body {
  overflow: auto;              2
  margin-top: 0;
}
  
.media-body h4 {
  margin-top: 0;
}
        
        Listado 4.11. La adición automática de overflow desencadena un nuevo block-formatting-context

Agrega un margen a la imagen para insertar espacio entre esta y el cuerpo
Establece un nuevo contexto de formato de bloque para que el cuerpo no se superponga a la imagen flotante

Usar overflow: auto para BFC es generalmente el enfoque más simple. En su lugar, puede usar las otras propiedades mencionadas anteriormente, pero algunas tienen consideraciones a tener en cuenta: un float o un inline-block crecerá al 100% de ancho, por lo que deberá restringir el ancho del elemento para evitar que se alinee envolviendo debajo del float. Por el contrario, un elemento de celda de tabla solo crecerá lo suficiente para contener su contenido, por lo que es posible que deba establecer un ancho grande para forzarlo a llenar el espacio restante.

En algunas circunstancias, el contenido de un block-formatting-context aún puede superponerse al contenido de otro. Esto sucederá si el contenido se desborda del contenedor (por ejemplo, el contenido es demasiado ancho) o si los márgenes negativos tiran del contenido fuera del contenedor.

Para obtener más información sobre el objeto de los medios, lea la publicación fundamental de Nicole Sullivan al respecto en https://mng.bz/6wj3w. Esta publicación se adentra en una metodología llamada CSS orientado a objetos (OOCSS), que veremos con más profundidad en el capítulo 9.

4.5. GRID SYSTEMS

Ahora ha creado su diseño de página completo, pero no está exento de errores. En particular, no se ha configurado para reutilizar fácilmente partes de los estilos. Ha codificado los objetos multimedia para que tengan un ancho del 50%, por lo que siempre están en filas de dos. ¿Qué pasa si luego quieres usar el mismo diseño en filas de tres en su lugar?

Una forma popular de facilitar la reutilización del código es con la ayuda de un ;grid-system. Esta es una serie de nombres de clases que puede agregar a su marcado para estructurar partes de la página en filas y columnas. No debe proporcionar estilos visuales, como colores o bordes, a la página; solo debe establecer el ancho y la posición de los contenedores. Dentro de cada uno de estos contenedores, puede agregar nuevos elementos para diseñar visualmente como desee.

La mayoría de los CSS frameworks populares incluyen algún tipo de grid-system. Los detalles varían de uno a otro, pero generalmente el principio general es el mismo: coloque un contenedor de fila alrededor de uno o más contenedores de columna. Cada una de las clases aplicadas a los contenedores de columna determinará sus respectivos anchos. Creemos nuestro propio grid-system para que tenga una idea clara de cómo funcionan y luego podrá aplicarlo a su página.

CSS framework es una biblioteca de código CSS prediseñado que proporciona estilos para patrones comunes en el desarrollo web. Estos pueden ser útiles para la creación rápida de prototipos o para proporcionar un punto de partida sólido sobre el que puede crear estilos adicionales. Los marcos comunes incluyen Bootstrap, Foundation y Pure.

4.5.1. Comprender un grid-system

Antes de construir el grid-system, veamos cómo puede esperar que se comporte. Un sistema de cuadrícula generalmente se define para contener un cierto número de columnas en cada fila; esto suele ser 12, pero puede variar. Los elementos secundarios de una fila pueden tener un ancho desde una columna hasta 12 columnas de ancho.

La figura 4.16 ilustra un par de filas en una cuadrícula de 12 columnas. La primera fila tiene seis elementos de 1 columna y tres elementos de 2 columnas. La siguiente fila tiene un elemento de 4 columnas seguido de un elemento de 8 columnas. Cada conjunto agrega hasta 12 columnas, por lo que llenarán el ancho de la fila.

Doce es un buen número de columnas porque es divisible por dos, tres, cuatro y seis, lo que proporciona mucha flexibilidad. Esto facilita el diseño de tres columnas (tres elementos de 4 columnas) o un diseño de cuatro columnas (cuatro elementos de 3 columnas). También puede crear diseños asimétricos, como un elemento principal de 9 columnas y una barra lateral de 3 columnas. Dentro de cada elemento de columna, puede colocar el marcado que necesite.

El marcado de este ejemplo es sencillo. Cada fila tiene un div contenedor de fila y dentro de él colocará un div para cada elemento de columna con una clase column-n (donde n es el número de columnas en la cuadrícula):

        
<div class="row">
  <div class="column-4">4 column</div>
  <div class="column-8">8 column</div>
</div>

4.5.2. Construyendo un grid-system

Vamos a convertir su paginá para que utilice un grid-system. Esto demostrará ser un poco más detallado que nuestro enfoque anterior de la página, pero la compensación por un CSS más reutilizable valdrá la pena. Edite su HTML para que coincida con este listado.

        
<main class="main clearfix">
  <h2>Running tips</h2>
  
  <div class="row">                                         
    <div class="column-6">                                  1
      <div class="media">                                   2
        <img class="media-image" src="runner.png">
        <div class="media-body">
          <h4>Strength</h4>
          <p>
            Strength training is an important part of
            injury prevention. Focus on your core—
            especially your abs and glutes.
          </p>
        </div>
      </div>
    </div>
  
    <div class="column-6">                                 2 
      <div class="media">
        <img class="media-image" src="shoes.png">
        <div class="media-body">
          <h4>Cadence</h4>
          <p>
            Check your stride turnover. The most efficient
            runners take about 180 steps per minute.
          </p>
        </div>
      </div>
    </div>
  </div>                                                   3  
  
  <div class="row">                                        1 
    div class="column-6">                                     2
      <div class="media">
        <img class="media-image" src="shoes.png">
        <div class="media-body">
          <h4>Change it up</h4>
          <p>
            Don't run the same every time you hit the
            road. Vary your pace, and vary the distance
            of your runs.
          </p>
        </div>
      </div>
    </div>
  
    <div class="column-6">                                  
      <div class="media">                                 2
        <img class="media-image" src="runner.png">
        <div class="media-body">
          <h4>Focus on form</h4>
          <p>
            Run tall but relaxed. Your feet should hit
            the ground beneath your hips, not out in
            front of you.
          </p>
        </div>
      </div>
    </div>
  </div>
</main>
        
        Listado 4.12. HTML reestructurado para usar un grid-system

Agrega una fila alrededor de cada conjunto de dos objetos multimedia
Agrega una columna-6 alrededor de cada objeto multimedia, colocando cada objeto multimedia en su propia columna
Cierra la primera fila antes de abrir la segunda

Esta lista le da una fila alrededor de cada conjunto de dos objetos multimedia. En su interior, ha envuelto cada objeto multimedia dentro de su propio contenedor de 6 columnas.

Agreguemos los estilos para diseñar la cuadrícula. Primero, definirá la clase de fila. Agregue este código a su hoja de estilo.

        
.row::after {                1
  content: " ";              1
  display: block;            1
  clear: both;               1
}                            1
        
        Listado 4.13. CSS para las filas de la cuadrícula

Replica el clearfix para que la fila contenga sus columnas flotantes

Esto no es más que un clearfix. Lo agrega aquí para no tener que agregar una clase clearfix cada vez que usa una fila. Agregará más a esto en un momento, pero fundamentalmente todo lo que hace la fila es proporcionar un contenedor para contener las columnas, y eso es lo que hace este clearfix por usted.

A continuación, agregará los estilos iniciales para las columnas. Aquí es donde tiene lugar el "trabajo pesado", pero como verá, no es demasiado complicado. Flotará todas las columnas a la izquierda y especificará los anchos para cada valor de columna. Agregue este listado a su hoja de estilo.

        
[class*="column-"] {                  1
  float: left;                        1
}                                     1
  
.column-1 { width: 8.3333%; }         2
.column-2 { width: 16.6667%; }        3
.column-3 { width: 25%; }             4
.column-4 { width: 33.3333%; }
.column-5 { width: 41.6667%; }
.column-6 { width: 50%; }
.column-7 { width: 58.3333%; }
.column-8 { width: 66.6667%; }
.column-9 { width: 75%; }
.column-10 { width: 83.3333%; }
.column-11 { width: 91.6667% }
.column-12 { width: 100%; }
        
        Listado 4.14. CSS para las columnas de la cuadrícula

Apunta a todos los elementos con un atributo de clase que incluye "columna-"
1/2
2/12
3/12 y así sucesivamente. . .

El primer selector aquí puede ser nuevo para usted. Es un selector de atributos, que apunta a elementos según su atributo de clase. Esto le permite hacer algo un poco más complejo de lo que puede hacer con un selector de clases normal. El comparador *= especifica cualquier valor que incluya la subcadena especificada: cualquier elemento con column- en cualquier lugar dentro del atributo de clase. Esto apunta a <div class = "column-2"> así como a <div class = "column-6">. En resumen, se dirige a cualquiera de sus clases de columna. Ahora todas las columnas, independientemente de su tamaño, flotarán hacia la izquierda. Consulte el apéndice A para obtener más información sobre los selectores de atributos.

Este selector de atributos arroja una red más amplia de la que necesita, ya que también apunta a algo como <div class = "column-header">. Tenga esto en cuenta a medida que escriba más estilos. Para nuestros propósitos, sería mejor considerar "column" en el nombre de una clase como una especie de palabra reservada de aquí en adelante para no chocar con estas reglas.

Después de aplicar float: left a todas las columnas, apunte a cada una individualmente, especificando sus anchos. Esto puede requerir un poco de trabajo en una calculadora para obtener cada valor: el número deseado de columnas dividido por el número total de columnas (12). Asegúrese de mantener al menos algunos puntos decimales de precisión para evitar errores de redondeo.

En esta etapa, tiene los conceptos básicos de un grid-system en su lugar. Su página debería verse como la figura 4.17. Parece un poco roto en este punto porque los objetos multimedia todavía tienen algunos estilos que duplican el trabajo realizado por el grid-system.

Ahora puede simplificar el objeto multimedia. Ya no es necesario que flote hacia la izquierda, ya que la columna de la cuadrícula lo hace por usted. Tampoco necesita ancho; sin uno, naturalmente llenará el 100% de su contenedor. El contenedor es un elemento de columna 6, que es del tamaño que desea. También puede eliminar los márgenes y el selector de n-ésimo hijo que borra cada fila. Entonces su página debería coincidir con la figura 4.18.

Después de eliminar estas partes, todos sus estilos para el objeto multimedia deben coincidir con los de la siguiente lista.

        
.media {                              1 
  padding: 1.5em;                     1 
  background-color: #eee;             1 
  border-radius: 0.5em;               1
}

.media-image {                        2
    float: left;
    margin-right: 1.5em;
}
  
.media-body {
  overflow: auto;
  margin-top: 0;
}
  
.media-body h4 {
  margin-top: 0;
}
        
        Listado 4.15. Eliminación de declaraciones de tamaño y posicionamiento del objeto multimedia

Declaraciones de flotador, margen y ancho eliminadas
Se eliminó el conjunto de reglas .media:nth-child(odd) con la declaración clear: left

Debido a que eliminó todos los márgenes del objeto multimedia, incluido el margen inferior, ya no hay un espacio debajo de la última fila de objetos multimedia y la parte inferior de su contenedor. Usemos un padding en el contenedor para recuperarlo.

        
.main {
  padding: 0 1.5em 1.5em;          1  
  background-color: #fff;
  border-radius: .5em;
}
        
        Listado 4.16. Agregar un padding inferior al contenedor principal

1 Agrega un acolchado inferior de 1.5em para que coincida con el acolchado izquierdo y derecho

Ahora está cerca del diseño final, aunque hay algunos detalles más para implementar.

4.5.3. Agregar canaletas

Una cosa que aún le falta a su grid-system es un canalón entre cada columna. Agreguemos los siguientes, junto con un par de detalles más. Una vez que termine, su página debería verse como la figura 4.19.

Puede crear canaletas agregando padding izquierdo y derecho a cada columna de la cuadrícula. Al agregar esto al sistema de cuadrícula en lugar de componentes individuales, como el objeto multimedia, podrá reutilizar la cuadrícula una y otra vez en otras páginas sin preocuparse por las canaletas nuevamente.

Como desea un tamaño de canaleta de 1.5em, puede dividirlo por la mitad y luego poner la mitad a la izquierda y la mitad a la derecha de cada elemento de la columna. Actualice sus estilos de cuadrícula para que coincidan con la siguiente lista. Esto también elimina el margen superior de todas las columnas, anulando nuevamente al búho lobotomizado.

        
[class*="column-"] {
  float: left;
  padding: 0 0.75em;           1
  margin-top: 0;               2
}
        
        Lista 4.17.Agregando canaletas al grid-system

Agrega .75 em relleno izquierdo y derecho a cada elemento de columna
Elimina los márgenes superiores de las columnas

Ahora los elementos de la columna de la cuadrícula siempre tendrán un buen margen de 1.5em entre ellos, y las cosas se ven bastante bien. Sin embargo, este código introduce una ligera desalineación entre una columna de la cuadrícula y el contenido fuera de la fila de la cuadrícula. La Figura 4.20 muestra dónde ocurre esto en la página: el borde izquierdo del título de la página ("Running tips") debe alinearse con el borde del objeto multimedia en la primera columna. En cambio, el padding de la columna empuja el cuadro gris del objeto multimedia un poco hacia la derecha.

Puede solucionar este problema eliminando el padding izquierdo de la primera columna de cada fila y el padding derecho de la última columna de cada fila; pero en lugar de aplicar un montón de reglas específicas para eso, ajustemos el ancho de la fila.

Puede estirar la fila para que sea un poco más ancha utilizando márgenes negativos. Al aplicar un margen izquierdo de -0.75em a la fila, el margen negativo tira de la fila izquierda fuera de su contenedor. Después de hacer esto, el relleno de la columna empujará su contenido 0.75em hacia la derecha, haciendo que la primera columna se alinee con el título (figura 4.21). La aplicación de un margen negativo en el lado derecho también hará lo mismo en el lado derecho.

El código para esto se muestra en el listado 4.18. No importa dónde coloque una fila, ahora se estirará 1.5em más que su contenedor; el relleno de las columnas desplazará su contenido hacia atrás para alinearlo con los bordes del contenedor exterior. Ésta es efectivamente una versión modificada del patrón de contenedor doble, donde la fila es el contenedor interno dentro de su envoltorio.

        
.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}
        
        Listado 4.18. Agregar márgenes negativos a la fila de la cuadrícula

Ahora tiene un grid-system completamente funcional, alimentado por float. Ya sea que use este o uno que encuentre en un CSS framework, ahora debería comprender cómo hace lo que hace. Su hoja de estilo completa ahora debería coincidir con la siguiente lista.

        
:root {
  box-sizing: border-box;
}
  
*,
::before,
::after {
  box-sizing: inherit;
}
  
body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
  
body * + * {
  margin-top: 1.5em;
}
  
.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}
  
.row::after {
  content: " ";
  display: block;
  clear: both;
}
  
[class*="column-"] {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
}
  
.column-1 { width: 8.3333%; }
.column-2 { width: 16.6667%; }
.column-3 { width: 25%; }
.column-4 { width: 33.3333%; }
.column-5 { width: 41.6667%; }
.column-6 { width: 50%; }
.column-7 { width: 58.3333%; }
.column-8 { width: 66.6667%; }
.column-9 { width: 75%; }
.column-10 { width: 83.3333%; }
.column-11 { width: 91.6667% }
.column-12 { width: 100%; }
  
header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: .5em;
  margin-bottom: 1.5em;
}
  
.main {
  padding: 0 1.5em 1.5em;
  background-color: #fff;
  border-radius: .5em;
}
  
.container {
  max-width: 1080px;
  margin: 0 auto;
}
  
.media {
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}
  
.media-image {
  float: left;
  margin-right: 1.5em;
}
  
.media-body {
  overflow: auto;
  margin-top: 0;
}
  
.media-body h4 {
  margin-top: 0;
}
  
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
        
        Listado 4.19. Hoja de estilo completa

Ahora ha diseñado una página utilizando floats por completo. Tienen sus peculiaridades, pero hacen el trabajo. Con una comprensión más profunda de su comportamiento, es de esperar que los floats no sean demasiado intimidantes. Como mencioné anteriormente, existen alternativas más fáciles de entender a los diseños basados en floats. Los veremos en los dos capítulos siguientes.

RESUMEN

Los floats existen para permitir que el texto se ajuste a un elemento, pero ese no suele ser el efecto que desea.
Utilice un clearfix para contener elementos float.
Comprenda los tres trucos de un contexto de formato de bloque: contener floats, evitar el colapso de los márgenes y evitar que el flujo de documentos se envuelva alrededor de un elemento float.
Utilice el patrón de contenedor doble para centrar el contenido de la página.
Utilice el patrón de objeto multimedia para colocar texto descriptivo junto a una imagen.
Utilice un grid-system para crear una amplia gama de diseños de página.