Flutuante CSS
- Página Anterior Posicionamento Absoluto CSS
- Próxima Página Seletor de Elemento CSS
A caixa flutuante pode se mover para a esquerda ou para a direita até que a margem externa dela toque na borda da caixa contida ou de outra caixa flutuante.
Como a caixa flutuante não está na corrente normal do documento, a caixa de bloco na corrente normal do documento se comporta como se a caixa flutuante não existisse.
Flutuante CSS
Veja a figura a seguir, quando a caixa 1 flutua para a direita, ela sai da corrente do documento e se move para a direita até que a margem direita dela toque na margem direita da caixa contida:
Vamos ver a figura a seguir, quando a caixa 1 flutua para a esquerda, ela sai da corrente do documento e se move para a esquerda até que a margem esquerda dela toque na margem esquerda da caixa contida. Porque ela não está mais na corrente do documento, ela não ocupa espaço, na verdade cobrindo a caixa 2, fazendo com que a caixa 2 desapareça da vista.
Se todos os três caixas forem movidas para a esquerda, a caixa 1 flutuará para a esquerda até tocar na caixa contida, e as outras duas caixas flutuarão para a esquerda até tocar na caixa flutuante anterior.
Como mostrado na figura a seguir, se a caixa contida for muito estreita para conter três elementos flutuantes alinhados horizontalmente, os outros blocos flutuantes descerão até que haja espaço suficiente. Se a altura dos elementos flutuantes for diferente, eles podem ser 'travados' por outros elementos flutuantes ao descer:
Propriedade float CSS
No CSS, realizamos a flutuação de elementos através da propriedade float.
Para obter mais informações sobre a propriedade float, acesse o manual de referência:Propriedade float CSS。
Caixa de linha e limpeza
A caixa de linha ao lado da caixa flutuante é encurtada, deixando espaço para a caixa flutuante e rodeando-a.
Portanto, criar uma caixa flutuante permite que o texto rode a imagem:
Para evitar que a caixa de linha rode a caixa flutuante, é necessário aplicar a caixa. propriedade clear. A propriedade clear pode ter os valores left, right, both ou none, indicando quais lados da caixa não devem estar encostados na caixa flutuante.
Para alcançar esse efeito, na margem superior externa do elemento a ser limpomargem superior externaadicionar espaço suficiente para que a margem superior do elemento desça verticalmente até abaixo da caixa flutuante:
Essa é uma ferramenta útil que faz com que os elementos ao redor deixem espaço para o elemento flutuante.
Vamos ver mais detalhadamente o flutuante e a limpeza. Suponha que você queira que uma imagem flutue para a esquerda de um bloco de texto e que esta imagem e texto estejam contidos em outro elemento com cor de fundo e borda. Você pode escrever o seguinte código:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>algum texto</p>
</div>
Neste caso, surgiu um problema. Porque o elemento flutuante saiu da corrente do documento, o div que envolve a imagem e o texto não ocupa espaço.
Como fazer com que o elemento envolvente envolva visualmente o elemento flutuante? Precisamos aplicar clear em algum lugar neste elemento:
Infelizmente, surgiu um novo problema, pois não há elementos existentes para aplicar a limpeza, então só podemos adicionar um elemento vazio e limpá-lo.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>algum texto</p>
<div class="clear"></div>
</div>
Dessa forma, podemos obter o efeito que desejamos, mas precisamos adicionar código adicional. frequentemente, há elementos que podem aplicar clear, mas às vezes é necessário adicionar marcação sem significado para a disposição.
No entanto, temos outra maneira, que é flutuar o div do contêiner:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>algum texto</p>
</div>
Dessa forma, obteremos o efeito que esperamos. Infelizmente, o próximo elemento será afetado por esse elemento flutuante. Para resolver esse problema, algumas pessoas optam por flutuar tudo no layout e, em seguida, usar elementos significativos (com frequência, o pé de página do site) para limpar esses flutuantes. Isso ajuda a reduzir ou eliminar a marcação desnecessária.
Na verdade, todas as páginas do site CodeW3C.com usam essa técnica. Se você abrir o arquivo CSS que usamos, você verá que limparamos o div de pé de página e os três divs acima da página de pé flutuam para a esquerda.
Propriedade clear CSS
Nós discutimos detalhadamente recentemente o mecanismo de limpeza do CSS e o método de aplicação da propriedade clear. Se você quiser aprender mais sobre a propriedade clear, acesse o manual de referência:Propriedade clear CSS。
Exemplo de flutuante e limpeza
- Aplicação simples da propriedade float
- Faça a imagem flutuar para a direita de um parágrafo
- Flutuar a imagem com borda e margem para a direita do parágrafo
- Faça a imagem flutuar para a direita do parágrafo. Adicione borda e margem à imagem.
- Imagem com título flutuando para a direita
- Faça a imagem flutuar para a direita com um título
- Faça a primeira letra do parágrafo flutuar para a esquerda
- Faça a primeira letra do parágrafo flutuar para a esquerda e adicione estilos a essa letra.
- Criar um menu horizontal
- Use flutuantes com links únicos em uma barra para criar um menu horizontal.
- Criar uma página inicial sem tabela
- Use flutuantes para criar uma página inicial com cabeçalho, rodapé, índice lateral e conteúdo principal.
- Limpar o lado lateral do elemento
- Este exemplo demonstra como usar elementos flutuantes para limpar o lado lateral do elemento.
- Página Anterior Posicionamento Absoluto CSS
- Próxima Página Seletor de Elemento CSS
