Floats CSS explicados em 5 perguntas

CSS "Floats" (elementos flutuantes) são simples de usar, mas uma vez usados, o efeito que ele tem sobre os elementos em torno dele às vezes se torna imprevisível. Se você já se deparou com os problemas de desaparecer elementos próximos ou carros alegóricos que cutucam como um polegar dolorido, não se preocupe mais.

Esta postagem abrange cinco perguntas básicas que ajudarão você a se tornar um especialista em elementos flutuantes.

1. Quais elementos não flutuam?
2. O que acontece com um elemento quando ele flutua?
3. O que acontece com os irmãos de "Floats"??
4. O que acontece com um pai de um "Float"??
5. Como você limpa "Floats"?

Para os leitores que adotam a abordagem da vida, existe um resumo perto do final do post.

1. Quais elementos não flutuam?

A absoluto ou elemento posicionado fixo não vai flutuar. Então, da próxima vez que você encontrar um float que não está funcionando, verifique se ele está posição: absoluto ou posição: fixo e aplicar alterações de acordo.

2. O que acontece com um elemento quando ele flutua?

Quando um elemento é marcado como "float", ele corre para a esquerda ou para a direita basicamente até atinge a parede do seu elemento recipiente. Alternativamente, ele será executado até atinge outro elemento flutuante que já atingiu a mesma parede. Eles continuarão se acumulando lado a lado até que o espaço se esgote, e os novos entrantes serão abaixados.

Elementos flutuantes também não vai acima dos elementos antes isto no código, algo que você precisa considerar antes de codificar um “Flutuador” depois de um elemento ao lado do qual você quer flutuar.

Aqui estão mais duas coisas que acontecem em um elemento flutuante, dependendo do tipo de elemento que está sendo mantido flutuando:

(1) Um elemento inline se transformará em um elemento de nível de bloco quando flutuou.

Já se perguntou por que de repente você pode atribuir altura e largura a um flutuante período? Isso porque todos os elementos quando flutuados receberão o valor quadra por sua exibição atributo (mesa embutida terá mesa) tornando-os elementos de nível de bloco.

(2) Um elemento de bloco de largura não especificada encolherá para caber seu conteúdo quando flutuou.

Geralmente, quando você não especifica largura para um elemento de bloco, sua largura é o padrão de 100%. Mas quando flutuou, isso não é mais o caso; a caixa do elemento de bloco encolherá até que seu conteúdo permaneça visível.

3. O que acontece com os irmãos de "Floats"??

Quando você decide flutuar um elemento entre vários elementos, não se preocupe com como ele se comportará, seu comportamento será previsível e será movido para a esquerda ou para a direita. O que você realmente deveria estar pensando é como os irmãos depois disso vão se comportar.

"Flutuadores" têm os irmãos mais carinhosos e obedientes de todo o mundo. Eles farão tudo ao seu alcance para acomodar um elemento flutuante.

o texto e elementos inline vai simplesmente abrir caminho para os "Floats" e vai cercar o "Float" quando está em posição.

o elementos de bloco vai um passo além e vai envolva-se em torno de um "Float" generosamente, mesmo que isso signifique expulsar seus próprios elementos filhos para criar espaço para o "Float".

Vamos verificar isso em um experimento. Abaixo estão uma caixa azul e depois é uma caixa vermelha do mesmo tamanho com alguns elementos filhos.

Agora, vamos flutuar a caixa azul e ver o que acontece com a caixa vermelha e seus filhos.

Tudo ficará bem quando a caixa vermelha parar de abraçar a caixa azul e para isso você pode usar estouro: oculto.

Quando você adiciona estouro: oculto para um elemento que tenha envolvido um float, ele parará de fazê-lo. Veja abaixo como a caixa vermelha se comporta com estouro: oculto.

4. O que acontece com um pai de um "Float"??

Os pais não se importam muito com seus filhos "flutuantes", exceto que eles não devem sair de seus limites esquerdos ou direitos..

Normalmente, um elemento de bloco de altura não especificada aumenta sua altura para acomodar seus elementos filhos, mas esse não é o caso de crianças "Flutuantes". Se o tamanho de um "Float" aumentar, seu pai não aumentará sua altura de acordo. Isso novamente pode ser resolvido usando estouro: oculto no pai.

5. Como limpar "Floats"?

Eu já mencionei o uso estouro: oculto fazer um pai altura acomodar uma criança flutuante enquanto cria o espaço certo para outros elementos após o "Float" e para impedir que irmãos envolvam "Floats.

E é assim que você faz um elemento ao vivo perto de um "Float" sem compromissos.

Existe outro método em que os elementos não estarão nem perto de seus irmãos "Float". Usando o Claro atributo você pode fazer um elemento livre de estar perto de um "Float".

claro: esquerda; claro: certo; limpar ambos; 

esquerda value limpa todos os "Floats" à esquerda do elemento e vice-versa certo, e em ambos os lados para ambos. este Claro atributo pode ser usado em um irmão, div vazio ou em pseudo elemento como por seu conveniente.

Resumo

1. Elementos absolutos / fixos não flutuam.
2. Um "Float" não vai acima do elemento antes no código.
3. Se não houver espaço suficiente no contêiner, um "Float" será empurrado para baixo.
4. Todos os "Floats" são transformados em elementos de nível de bloco.
5. Se a largura não for especificada em um "Float", ela será reduzida para caber no conteúdo.
6. Os irmãos mais recentes de um "Float" os cercarão (inline e texto) ou os envolverão (blocos).
7. Para impedir que um elemento envolva um "Float", use estouro: oculto.
8. Os pais de um "Float" s não aumentariam sua altura para se ajustar ao float.
9. Para fazer um pai aumentar sua altura de acordo com o "Float", use estouro: oculto (ou criar um irmão vazio com Claro depois disso)
10. Para evitar que um elemento esteja perto de qualquer "Float" use o Claro atributo.