Atributo float do CSS
Definição e uso
A propriedade float define em qual direção o elemento flutua. Antigamente, essa propriedade era aplicada sempre a imagens, para que o texto flutuasse ao redor da imagem, mas no CSS, qualquer elemento pode flutuar. Elementos flutuantes geram uma caixa de bloco, independentemente do tipo de elemento.
Se o elemento flutuante não for substituído, é necessário especificar uma largura clara; caso contrário, eles serão tão estreitos quanto possível.
Notas:Se houver pouco espaço disponível em uma linha para elementos flutuantes, esses elementos saltarão para a próxima linha, continuando até que uma linha tenha espaço suficiente.
Veja também:
Tutorial CSS:Posicionamento CSS
Manual de referência do HTML DOM:Propriedade cssFloat
Sintaxe do CSS
float: none|left|right|initial|inherit;
Valor do atributo
| Valor | Descrição |
|---|---|
| left | O elemento flutua para a esquerda. |
| right | O elemento flutua para a direita. |
| none | Valor padrão. O elemento não flutua e é exibido na posição onde aparece no texto. |
| inherit | Especifica que o valor da propriedade float deve ser herdado do elemento pai. |
Detalhes técnicos
| Valor padrão: | none |
|---|---|
| Herança: | no |
| Versão: | CSS1 |
| Sintaxe do JavaScript: | object.style.cssFloat="left" |
Exemplo TIY
- Aplicação simples da propriedade float
- Leve a imagem para a direita de um parágrafo
- Leve a imagem com borda e margem para a direita do parágrafo
- Leve a imagem para a direita do parágrafo. Adicione borda e margem à imagem.
- Imagem com título flutuando para a direita
- Leve a imagem com título para a direita
- Leve a primeira letra do parágrafo para a esquerda
- Leve a primeira letra do parágrafo para a esquerda e adicione estilos a essa letra.
- Criar um menu horizontal
- Use flutuação com links de uma coluna para criar um menu horizontal.
- Criar uma primeira página sem tabela
- Use flutuação para criar uma primeira página com cabeçalho, rodapé, índice de lado esquerdo e conteúdo principal.
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
