Echemos un vistazo al diseño de la cuadrícula del sitio y analicemos los componentes individuales. Exploremos por qué float es tan útil, así como la técnica popular para construir la primera cuadrícula web a partir de tres flujos y un pie de página del sitio.
Para estudiar la construcción de la red de un sitio, debe comprender qué es un "flujo". El flujo son los elementos del sitio, ubicados uno tras otro. Por ejemplo, estos pueden ser elementos div que van uno tras otro de forma predeterminada. Pero el flujo se puede reorganizar y la posición de los elementos del bloque se puede cambiar.
Para controlar el flujo, usamos la propiedad float, que puede colocar el bloque en el lado izquierdo o derecho. Basta con escribir en el archivo CSS:
"nombre de clase o bloque" {float: right / left; }
El único inconveniente del flotador es la capacidad de "superponer" un bloque sobre otro.
Para evitar atropello, usamos clear: both: esta propiedad establecerá el flujo alrededor del bloque. Establecemos el ancho y alto, como máximo y mínimo, para que el valor se forme según el tamaño del contenido (texto, imágenes). Margen: establezca el valor en automático para que los márgenes externos se formen automáticamente según la ubicación del bloque.
Dado que el flotador puede colocar bloques en dos direcciones, es habitual dividir el sitio en corrientes: izquierda y derecha. Si el programador necesita solo dos flujos, entonces deja los flotadores izquierdo y derecho, pero si hay más de dos, ajusta los márgenes usando el margen. Como sucedió esto:
.column1 {float: left; ancho: 65px; altura mínima: 50px; margen derecho: 9px; // 9px desde el cuadro central}
2 corriente:
.column2 {float: left; // al bloque de la izquierda, pero sin "superponer", ya que aplicamos ancho de margen: 80px; altura mínima: 50px; }
3 corriente:
.column3 {float: right; ancho: 65px; altura mínima: 50px; }
Tratar con el pie de página (.footer):
.footer {claro: ambos; // envuelve ambos lados}
Así es como hicimos una cuadrícula para el sitio usando float, que consta de tres corrientes.
