Vamos prestar atenção às desvantagens do float. Como os elementos block e inline se comportam entre si e se devem ser usados juntos. Vamos analisar o que é uma perda e como lidar com ela.
Apesar do fato de que no último artigo nós construímos uma grade simples para o site usando floats, eles têm a intenção original de ajustar o fluxo dos elementos no texto. Float tem três significados: left - os elementos ficam na margem esquerda; direita - os elementos são pressionados para a borda direita; nenhum - o modo de agrupamento está desativado.
Um elemento flutuante pode ser dimensionado e preenchido, mas se o elemento estiver embutido, ele se comportará como um elemento de bloco.
. Bloco 1 {
flutuar: esquerda;
largura: 150px;
}
.block2 {
flutuar: certo;
largura: 150px;
}
Há outro problema ao usar flutuadores, que está caindo do fluxo. Aparece quando os blocos vão um após o outro, mas apenas um deles tem a propriedade float, então ficará em cima dos demais, pois não vê os outros blocos. Os elementos embutidos envolverão os elementos float, mas o bloco que contém esse texto permanecerá sob o elemento float.
Mas como o float interage com o float?
Eles se comportam como texto: ficam um após o outro enquanto houver espaço livre e, em seguida, movem-se para uma nova linha. Portanto, com a ajuda de flutuadores, começamos a construir grades. Se não sobrar espaço, eles são movidos além da largura do site, ou seja, não vão a lugar nenhum.
Se o float não vê elementos de bloco simples, então os elementos de bloco podem ser ensinados a ver o float. Usamos a propriedade clear, que desativa o empacotamento de todos os lados (ou dos selecionados). Ou seja, um elemento com clear cairá sob o elemento com float.
