Flutuar - CSS-Tricks

A floatpropriedade em CSS é usada para posicionamento e layout em páginas da web.

.module ( float: left; )

Valores

• none: o elemento não flutua. Este é o valor inicial.
• left: flutua o elemento para a esquerda de seu contêiner.
• right: flutua o elemento à direita de seu contêiner.
• inherit: o elemento herda a direção de flutuação de seu pai.

Nota: Um elemento que é flutuado é automaticamente display: block;

O que significa flutuação?

Para entender o propósito e a origem de float, podemos olhar para o design de impressão. Em um layout de impressão, as imagens podem ser definidas na página de forma que o texto as envolva conforme necessário. Isso é comumente e apropriadamente chamado de “quebra de texto”. Aqui está um exemplo disso.

Em programas de layout de página, as caixas que contêm o texto podem ser instruídas para respeitar a quebra de linha ou para ignorá-la. Ignorar a quebra automática do texto permitirá que as palavras fluam sobre a imagem como se ela nem estivesse lá. Essa é a diferença entre aquela imagem fazer parte do fluxo da página (ou não). O design da Web é muito semelhante.

No web design, os elementos da página com a floatpropriedade CSS aplicada a eles são como as imagens no layout de impressão, onde o texto flui ao redor deles. Os elementos flutuantes continuam a fazer parte do fluxo da página da web. Isso é muito diferente dos elementos da página que usam posicionamento absoluto. Os elementos da página posicionados de forma absoluta são removidos do fluxo da página da web, como quando a caixa de texto no layout de impressão foi instruída a ignorar a quebra de página. Os elementos da página posicionados de forma absoluta não afetarão a posição de outros elementos, e outros elementos não os afetarão, quer se toquem ou não.

Demo

Esta demonstração mostra um artigo com duas imagens: uma definida como float: lefte outra definida como float: right. Pressione o botão “alternar flutuadores” para ativar e desativar os flutuadores.

Veja o exemplo de caneta flutuante por CSS-Tricks (@ css-tricks) em CodePen.

Flutuadores para Layout

Além do exemplo simples de envolver o texto em imagens, os flutuadores podem ser usados ​​para criar layouts de web inteiros .

Flutuadores também são úteis para layout em instâncias menores. Veja, por exemplo, esta pequena área de uma página da web. Se usarmos floatpara nossa imagem de avatar, quando essa imagem mudar de tamanho, o texto na caixa irá refluir para acomodá-la:

Esse mesmo layout pode ser obtido usando o posicionamento relativo no contêiner e também o posicionamento absoluto no avatar. Mas, quando feito dessa forma, o texto não seria afetado pelo avatar e não seria capaz de refluir em uma alteração de tamanho.

Demo

Esta demonstração mostra um avatar com float: leftaplicado. Pressione o botão “alternar tamanho da imagem” para ver uma versão mais ampla da imagem do avatar. Observe que o texto reflui para acomodar a imagem em vez de correr sobre a imagem.

Veja o Pen Float Demo por CSS-Tricks (@ css-tricks) no CodePen.

Limpando o flutuador

A propriedade irmã de Float é clear. Um elemento que tem a clearpropriedade definida não se moverá para cima adjacente ao flutuador como o flutuador deseja, mas se moverá para baixo após o flutuador. Novamente, uma ilustração é mais útil do que palavras:

No exemplo acima, a barra lateral flutua para a direita e é mais curta do que a área de conteúdo principal. O rodapé deve então saltar para o espaço disponível conforme exigido pelo flutuador. Para corrigir esse problema, o rodapé pode ser limpo para garantir que fique abaixo de ambas as colunas flutuantes.

#footer ( clear: both; )

Clear tem quatro valores válidos também. O valor bothé mais comumente usado, o que limpa os flutuadores vindos de qualquer direção. Os valores lefte rightpodem ser usados ​​para limpar apenas o flutuador de uma direção, respectivamente. O valor inicial é none, o que normalmente é desnecessário, a menos que seja usado para remover explicitamente um clearvalor que foi definido. O valor inheritfaz com que o elemento herde o clearvalor de seu pai . Estranhamente, o Internet Explorer não ofereceu suporte a esse valor até o IE8.

Limpar apenas o leftou rightfloat, embora seja menos comumente visto na natureza, definitivamente tem sua utilidade.

O Grande Colapso

Uma das coisas mais desconcertantes sobre como trabalhar com floats é como eles podem afetar o elemento que os contém (seu elemento “pai”). Se um elemento pai não contém nada além de elementos flutuantes, sua altura se reduz a nada. Isso nem sempre é óbvio se o pai não contém nenhum fundo visualmente perceptível, mas é importante estar ciente disso.

Por mais contraintuitivo que o colapso possa parecer, a alternativa é pior. Considere este cenário:

Se o elemento de bloco no topo tivesse se expandido automaticamente para acomodar o elemento flutuante, teríamos uma quebra de espaçamento não natural no fluxo do texto entre os parágrafos, sem nenhuma maneira prática de corrigi-lo. Se fosse esse o caso, nós, designers, reclamaríamos muito mais sobre esse comportamento do que sobre colapso.

Quase sempre é necessário lidar com o colapso para evitar um layout estranho e problemas entre navegadores. Nós o consertamos limpando o flutuador após os elementos flutuantes no contêiner, mas antes do fechamento do contêiner.

Técnicas para limpar flutuadores

Se você estiver em uma situação em que sempre sabe qual será o elemento de sucesso, poderá aplicar o clear: both;valor a esse elemento e prosseguir com seu negócio. Isso é ideal, pois não requer hacks extravagantes e nenhum elemento adicional, tornando-o perfeitamente semântico. É claro que as coisas normalmente não funcionam assim e precisamos ter mais ferramentas de compensação de flutuador em nossa caixa de ferramentas.

• O Método Div Vazio é, literalmente, um div vazio. . Às vezes, você verá um
elemento ou outro elemento aleatório usado, mas div é o mais comum porque não tem um estilo padrão do navegador, não tem nenhuma função especial e é improvável que seja genericamente estilizado com CSS. Este método é desprezado pelos puristas semânticos, uma vez que não tem nenhum significado contextual para a página e existe apenas para apresentação. Claro, no sentido mais estrito, eles estão certos. Mas faz o trabalho e não faz mal a ninguém.
• O Método Overflow depende da configuração da overflowpropriedade CSS em um elemento pai. Se esta propriedade for definida como autoou hiddenno elemento pai, o pai se expandirá para conter os flutuadores, limpando-o efetivamente para os elementos seguintes. Esse método pode ser perfeitamente semântico, pois pode não exigir elementos adicionais. No entanto, se você estiver adicionando um novo divapenas para aplicá-lo, é tão anti-semântico quanto o divmétodo vazio e menos adaptável. Também tenha em mente que a propriedade overflow não é especificamente para limpar flutuações. Tenha cuidado para não ocultar o conteúdo ou acionar barras de rolagem indesejadas.
• O Easy Clearing Method (também conhecido como “clearfix”) usa um inteligente pseudo seletor CSS ( :after) para limpar os floats. Em vez de definir o overflow no pai, você aplica uma classe adicional como “clearfix” a ele. Em seguida, aplique este CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Isso aplicará um pequeno pedaço de conteúdo, oculto da visualização, após o elemento pai que limpa o flutuador. Esta não é toda a história, já que um código adicional precisa ser usado para acomodar navegadores mais antigos. Nota: Veja também este snippet que mantém o controle dos melhores e mais recentes em clearfixes, incluindo o mais recente “micro clearfix”.

Diferentes cenários exigem diferentes métodos de compensação de float. Considere, por exemplo, uma grade de blocos, cada um de diferentes tipos.

Para conectar melhor visualmente os blocos semelhantes, queremos iniciar uma nova linha como quisermos, neste caso quando a cor muda. Poderíamos usar o método de estouro ou de limpeza fácil se cada um dos grupos de cores tivesse um elemento pai. Ou usamos o método div vazio entre cada grupo. Três divs envolventes que não existiam anteriormente ou três após divs que não existiam anteriormente. Vou deixar você decidir o que é melhor.

Problemas com flutuadores

Os carros alegóricos costumam ser espancados por serem frágeis. A maior parte dessa fragilidade veio de bugs no IE6 e no IE7. À medida que esses navegadores desaparecem no passado, esses bugs desaparecem junto com eles. Mas, ainda vale a pena entendê-los se você precisar depurar um “OldIE”.

• Empurrão é um sintoma de um elemento dentro de um item flutuante sendo mais largo do que o próprio flutuador (normalmente uma imagem). A maioria dos navegadores renderizará a imagem fora do float, mas não fará com que a parte saliente afete outro layout. Versões antigas do IE expandiam o float para conter a imagem, freqüentemente afetando drasticamente o layout. Um exemplo comum é uma imagem saindo do conteúdo principal empurrando a barra lateral para baixo.
  

  

  Solução rápida: certifique-se de que não há imagens que façam isso, use overflow: hidden;para cortar o excesso.

• Bug de margem dupla - Outra coisa a lembrar ao lidar com o IE 6 é que se você aplicar uma margem na mesma direção do float, ela dobrará a margem. Correção rápida: definido display: inlineno flutuador e não se preocupe, ele permanecerá um elemento de nível de bloco.
• O Jog de 3px é quando o texto que está próximo a um elemento flutuante é misteriosamente chutado por 3px como um campo de força estranho ao redor do flutuador. Correção rápida: defina uma largura ou altura no texto afetado.
• No IE 7, o bug da margem inferior ocorria quando, se um pai flutuante tivesse filhos flutuantes dentro dele, a margem inferior desses filhos era ignorada pelo pai. Solução rápida: usar preenchimento inferior no pai.

Alternativas

Se você precisa de quebra automática de texto ao redor de imagens, realmente não há alternativas para float. Falando nisso, verifique esta técnica bastante inteligente para envolver o texto em formas irregulares. Mas, para o layout da página, definitivamente existem opções. Eric Sol tem um artigo sobre A List Apart, Faux Absolute Positioning, que descreve uma técnica muito interessante que, de muitas maneiras, combina a flexibilidade dos flutuadores com a força do posicionamento absoluto.

O CSS3 aborda o layout da página de duas maneiras:

• Flexbox
• Layout de múltiplas colunas
• Layout de grade

Flutuadores absolutamente posicionados (por exemplo, você posiciona absolutamente como normal, mas o elemento ainda é capaz de afetar outros elementos, como ter quebra de texto em torno dele) foram discutidos, mas acho que a ideia foi arquivada devido a semelhanças com outras ideias de layout mais robustas.

Vídeo

Eu fiz um screencast um tempo atrás explicando muitos desses conceitos de float.

Relacionado

• clear
• position

Mais Informações

• float na especificação W3C
• float em MDN

Suporte para navegador

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
Todo	Todo	Todo	Todo	Todo	Todo	Todo