Vamos dar uma olhada no design da grade do site e dividir os componentes individuais. Vamos explorar por que float é tão útil, bem como a técnica popular para construir a primeira grade da web a partir de três fluxos e um rodapé de site.
Para estudar a construção da grade de um site, você precisa entender o que é um "fluxo". Fluxo são os elementos do site, localizados um após o outro. Por exemplo, podem ser elementos div que vão um após o outro por padrão. Mas o fluxo pode ser reorganizado e a posição dos elementos do bloco pode ser alterada.
Para controlar o fluxo, usamos a propriedade float, que pode colocar o bloco do lado esquerdo ou direito. Basta escrever no arquivo CSS:
"nome da classe ou bloco" {float: direita / esquerda; }
A única desvantagem do float é a capacidade de "sobrepor" um bloco sobre o outro.
Para evitar atropelamento, usamos clear: both - esta propriedade definirá o fluxo ao redor do bloco. Definimos a largura e altura, em máximo e mínimo, para que o valor seja formado de acordo com o tamanho do conteúdo (texto, imagens). Margem - defina o valor como automático para que as margens externas sejam formadas automaticamente dependendo da localização do bloco.
Como o flutuador pode colocar blocos em duas direções, é comum dividir o local em riachos - esquerda e direita. Se o programador precisar de apenas dois fluxos, ele deixa os flutuadores esquerdo e direito, mas se houver mais de dois, ele ajusta as margens usando margem. Como isso acontece:
.column1 {float: left; largura: 65px; altura mínima: 50px; margem direita: 9px; // 9px da caixa central}
2 stream:
.column2 {float: left; // para o bloco esquerdo, mas sem "sobreposição", já que aplicamos a largura da margem: 80px; altura mínima: 50px; }
3 stream:
.column3 {float: right; largura: 65px; altura mínima: 50px; }
Lidando com o rodapé (. Rodapé):
.footer {claro: ambos; // envolve os dois lados}
Foi assim que fizemos uma grade para o site usando float, composta por três fluxos.
