Exemplo de Flutuante do CSS
- Página anterior Remoção de flutuação CSS
- Próxima página inline-block CSS
Esta página fornece exemplos comuns de浮动.
Grade / Caixa de largura igual
Ao usar float A propriedade permite que você alinhe facilmente boxes flutuantes lado a lado:
Exemplo
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* Três boxes (quatro boxes usam 25%, dois boxes usam 50%, e assim por diante) */
padding: 50px; /* Se precisar adicionar espaçamento entre imagens */
}
O que é box-sizing?
Você pode criar três boxes flutuantes lado a lado facilmente. No entanto, quando você adiciona conteúdo para expandir a largura de cada caixa (por exemplo, margens internas ou bordas), a caixa se danifica. box-sizing A propriedade permite que incluamos a largura (e altura) total da caixa, incluindo margens internas e bordas, garantindo que as margens internas fiquem dentro da caixa e não se estendam.
Você pode encontrar em nosso Box Sizing CSS Nesta seção, você aprenderá mais sobre a propriedade box-sizing.
Imagens lado a lado
Este grid de boxes também pode ser usado para exibir imagens lado a lado:
Exemplo
.img-container {
float: left;
width: 33.33%; /* Três boxes (quatro boxes usam 25%, dois boxes usam 50%, e assim por diante) */
padding: 5px; /* Se precisar adicionar espaçamento entre imagens */
}
Caixa de largura igual
No exemplo anterior, você aprendeu como alinhar boxes flutuantes com largura igual. No entanto, é difícil criar boxes flutuantes com a mesma altura. No entanto, uma solução rápida é definir uma altura fixa, como no exemplo a seguir:
Box 1
Alguns conteúdos, alguns conteúdos, alguns conteúdos
Box 2
Alguns conteúdos, alguns conteúdos, alguns conteúdos
Alguns conteúdos, alguns conteúdos, alguns conteúdos
Alguns conteúdos, alguns conteúdos, alguns conteúdos
Exemplo
.box {
height: 500px;
}
Mas, ao fazer isso, você perde a flexibilidade. Se você puder garantir que o conteúdo dentro da caixa seja sempre o mesmo número, isso é bom. Mas muitas vezes, o conteúdo é diferente. Se você tentar o exemplo acima no telefone, verá que o conteúdo da segunda caixa será exibido fora da caixa. É aqui que o CSS3 Flexbox entra em ação - porque ele pode esticar automaticamente a caixa para que ela seja tão longa quanto a mais longa caixa:
Exemplo
Crie uma caixa flexível usando Flexbox:
O único problema do Flexbox é que ele não funciona no Internet Explorer 10 ou versões anteriores. Você pode encontrar em nossos Flexbox CSS Aprenda mais sobre o módulo de layout Flexbox na seção.
Menu de navegação
Coloque float Use-o juntamente com uma lista de hiperlinks para criar um menu horizontal:
Exemplo
Exemplos de layout da Web
Use float É comum usar atributos para completar a configuração de layout completo da Web:
Exemplo
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
Mais exemplos
- A imagem com borda e margem flutua para a direita do parágrafo
- Faça a imagem flutuar para a direita do parágrafo. Adicione uma borda e margem à imagem.
- A imagem com título flutua para a direita
- Faça a imagem com título flutuar para a direita.
- 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 defina o estilo dessa letra.
- Crie um site usando a flutuação
- Use a flutuação para criar uma página inicial com barra de navegação horizontal, cabeçalho, rodapé, barra de navegação lateral esquerda e conteúdo principal.
Todos os atributos de flutuação CSS
| Atributo | Descrição |
|---|---|
| box-sizing | Definição da forma de cálculo da largura e altura dos elementos: se eles devem incluir o preenchimento interno e a borda. |
| clear | Especifica quais elementos podem flutuar ao lado de um elemento a ser removido e em qual lado. |
| float | Especifica como o elemento deve flutuar. |
| overflow | Especifica o que acontece se o conteúdo sobressair ao elemento. |
| overflow-x | Especifica como o conteúdo deve ser tratado nas bordas esquerda/direita da área de conteúdo do elemento ao sobressair. |
| overflow-y | Especifica como o conteúdo deve ser tratado nas bordas superior/inferior da área de conteúdo do elemento ao sobressair. |
- Página anterior Remoção de flutuação CSS
- Próxima página inline-block CSS
