O que a regra CSS "clear: both" faz?

293

O que faz a seguinte regra CSS:

.clear { clear: both; }

E por que precisamos usá-lo?

Peter Mortensen
fonte
22
Quando você estiver usando CSS floate quiser o próximo elemento abaixo, não à direita ou à esquerda.
Riz
Sem elementos de flutuação permitida do lado esquerdo e do lado direito de um elemento especificado, quando o elemento é utilizado com clara: ambos
JackXu

Respostas:

687

Não vou explicar como os carros alegóricos funcionam aqui (em detalhes), pois essa pergunta geralmente se concentra em Por que usar clear: both;OU o que clear: both;exatamente faz ...

Vou manter esta resposta simples e direta, e explicarei graficamente por que clear: both;é necessário ou o que faz ...

Geralmente, os designers flutuam os elementos, esquerda ou direita, o que cria um espaço vazio no outro lado, o que permite que outros elementos ocupem o espaço restante.

Por que eles flutuam elementos?

Os elementos são flutuados quando o designer precisa de 2 elementos no nível do bloco lado a lado. Por exemplo, digamos que desejamos criar um site básico com um layout como o abaixo ...

insira a descrição da imagem aqui

Exemplo ao vivo da imagem de demonstração.

Code For Demo

Nota: Você pode ter que adicionar header, footer, aside, section(e outros elementos HTML5) como display: block;em sua folha de estilo para mencionar explicitamente que os elementos são elementos nível de bloco.

Explicação:

Eu tenho um layout básico, 1 cabeçalho, 1 barra lateral, 1 área de conteúdo e 1 rodapé.

Sem flutuações header, a seguir vem a asidetag que eu usarei para a barra lateral do meu site, então flutuarei o elemento para a esquerda.

Nota: Por padrão, o elemento no nível do bloco ocupa 100% da largura do documento, mas, quando flutuado para a esquerda ou para a direita, é redimensionado de acordo com o conteúdo que contém.

  1. Comportamento normal do elemento de nível de bloco
  2. Comportamento flutuante do elemento de nível de bloco

Então, como você observa, a esquerda flutuada divdeixa o espaço à sua direita sem uso, o que permitirá que o divdepois alterne no espaço restante.

  1. divrenderizará um após o outro se NÃO estiverem flutuando
  2. div deslocarão um ao lado do outro se flutuarem para a esquerda ou direita

Ok, é assim que os elementos no nível do bloco se comportam quando flutuados para a esquerda ou para a direita. Agora, por que é clear: both;necessário e por quê?

Portanto, se você notar na demonstração do layout - caso tenha esquecido, aqui está ..

Estou usando uma classe chamada .cleare ela contém uma propriedade chamada clearcom um valor de both. Então, vamos ver por que ele precisa both.

Eu flutuei asidee sectionelementos à esquerda, então assuma um cenário, onde temos uma piscina, onde headeré terra firme, asidee sectionflutuamos na piscina e rodapé é terra firme novamente, algo como isto ..

Vista flutuante

Portanto, a água azul não tem idéia de qual é a área dos elementos flutuantes, eles podem ser maiores que a piscina ou menores, então aqui vem um problema comum que incomoda 90% dos iniciantes em CSS: por que o fundo de um elemento contêiner não é esticado quando ele contém elementos flutuantes. É porque o elemento container é uma POOL aqui e a POOL não tem idéia de quantos objetos estão flutuando ou qual é o comprimento ou a largura dos elementos flutuados, então simplesmente não se estende.

  1. Fluxo normal do documento
  2. Seções flutuadas para a esquerda
  3. Elementos flutuantes limpos para esticar a cor de fundo do contêiner

(Consulte a seção [Clearfix] desta resposta para obter uma maneira clara de fazer isso. Estou usando um divexemplo vazio intencionalmente para fins de explicação)

Eu forneci 3 exemplos acima, 1º é o fluxo normal de documentos, onde o redplano de fundo será renderizado conforme o esperado, pois o contêiner não contém nenhum objeto flutuante.

No segundo exemplo, quando o objeto é flutuado para a esquerda, o elemento do contêiner (POOL) não conhece as dimensões dos elementos flutuantes e, portanto, não se estende até a altura dos elementos flutuados.

insira a descrição da imagem aqui

Após o uso clear: both;, o elemento contêiner será esticado até suas dimensões flutuantes.

insira a descrição da imagem aqui

Outro motivo clear: both;é usado para impedir que o elemento se desloque para cima no espaço restante.

Digamos que você queira 2 elementos lado a lado e outro elemento abaixo deles ... Então, você flutuará 2 elementos para a esquerda e deseja o outro abaixo deles.

  1. divFlutuou para a esquerda, resultando na sectionmudança para o espaço restante
  2. Flutuado divlimpo para que a sectiontag seja renderizada abaixo dos divs flutuados

1º exemplo

insira a descrição da imagem aqui


2º Exemplo

insira a descrição da imagem aqui

Por último, mas não menos importante, a footertag será renderizada após os elementos flutuantes, como eu usei a clearclasse antes de declarar minhas footertags, o que garante que todos os elementos flutuantes (esquerda / direita) sejam limpos até esse ponto.


Clearfix

Chegando ao clearfix que está relacionado aos carros alegóricos. Como já especificado por @Elky , a maneira como limpamos esses carros alegóricos não é uma maneira limpa de fazê-lo, pois estamos usando um divelemento vazio que não é um divelemento para o qual se destina. Daí vem aqui o clearfix.

Pense nisso como um elemento virtual que criará um elemento vazio para você antes que seu elemento pai termine. Isso limpará automaticamente o elemento do invólucro segurando os elementos flutuantes. Este elemento não existe literalmente no seu DOM, mas fará o trabalho.

Para limpar automaticamente qualquer elemento do invólucro com elementos flutuantes, podemos usar

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Observe o :afterpseudo elemento usado por mim para isso class. Isso criará um elemento virtual para o elemento wrapper imediatamente antes de ele se fechar. Se olharmos para o dom, você pode ver como ele aparece na árvore de documentos.

Clearfix

Então, se você vê, ele é renderizado após o filho divflutuante, onde limpamos os carros alegóricos, que nada mais são do que equivalentes a ter um divelemento vazio com a clear: both;propriedade que estamos usando para isso também. Agora porque display: table;econtent está fora desse escopo de respostas, mas você pode aprender mais sobre o pseudo elemento aqui .

Observe que isso também funcionará no IE8, pois o IE8 suporta :afterpseudo .


Resposta original:

A maioria dos desenvolvedores flutua seu conteúdo para a esquerda ou para a direita em suas páginas, provavelmente divs segurando o logotipo, a barra lateral, o conteúdo etc. flutuar também no espaço restante, para evitar que clear: both; seja usado, ele limpa todos os elementos flutuados para a esquerda ou para a direita.

Demonstração:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Agora, e se você quiser fazer a outra div renderizar abaixo div1, use-a clear: both;para garantir que você limpe todas as flutuações, esquerda ou direita

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
Mr. Alien
fonte
3
Se você nunca ouviu falar sobre carros alegóricos, sugiro que você leia primeiro uma introdução aos carros alegóricos - por exemplo, consulte o link na próxima resposta. Então volte e leia esta resposta - fará sentido.
Osa
37
Observe que os carros alegóricos não foram originalmente inventados para ter dois elementos de nível de bloco lado a lado, esse é apenas o efeito colateral! O objetivo original era permitir que o texto flua ao redor das imagens em linha, para que você flutue as imagens em qualquer direção.
Ghost de Madara
3
Resposta curta relacionado para referir-se antes de ler este, só para ter uma idéia geral .. stackoverflow.com/questions/16568272/...
Sr. Estrangeiro
@ mr-alienígena bom exemplo, no entanto, no caso de jsfiddle.net/N82UD/1 quando você encolher a tela, há um problema com o flutuador e o "limpo" elemento não está seguindo o fluxo: jsfiddle.net/N82UD/138 Ele assume o espaço do item flutuante 2
Omar
1
@Carlo: Uma alternativa que é muito usada em modelos como o Twitter Bootstrap, por exemplo; é colocar display: inline-blockum elemento e no pai você pode usar text-align: left, text-align: centerou text-align: rightpor exemplo.
Daan
39

o clear propriedade indica que os lados esquerdo, direito ou ambos de um elemento não podem ser adjacentes aos elementos flutuados anteriormente no mesmo contexto de formatação de bloco. Os elementos limpos são pressionados abaixo dos elementos flutuantes correspondentes. Exemplos:

clear: none; O elemento permanece adjacente aos elementos flutuados

clear: left; Elemento empurrado abaixo dos elementos flutuados à esquerda

clear: right; Elemento empurrado abaixo dos elementos flutuados à direita

clear: both; Elemento empurrado abaixo de todos os elementos flutuados

clear não afeta carros alegóricos fora do contexto de formatação do bloco atual

Salman A
fonte
1
Excelente. Esta é a melhor resposta. Eu me pergunto por que outra resposta foi aceita.
sawa
O que acontecerá se removermos a display: inline-block;propriedade css desse cenário? Ele estenderá o inline-blockelemento pai ao seu elemento irmão que tem classe float-left. O que torna a instrução "clear" não afeta flutuadores fora do contexto de formatação do bloco atual "incorretamente. Alguém poderia explicar por favor?
Sashrika Waidyarathna
@SashrikaWaidyarathna: um elemento pai não gera necessariamente um contexto de formatação de bloco para seus filhos. No seu exemplo (a) remover display: inline-blocksignifica que ele não gera mais um contexto de formatação de bloco (b) os flutuadores / limpam dentro desse elemento e o primeiro flutuador se torna parte do mesmo contexto de formatação de bloco (a janela de exibição).
Salman A
@ SalmanA, obrigado pela explicação referente à especificação css. Eu não estava ciente da definição de contexto de formatação de bloco.
Sashrika Waidyarathna 24/03
2
Sundar Pichai doppelganger?
Manoj Kumar
13

A resposta do Sr. Alien é perfeita, mas de qualquer maneira eu não recomendo usar, <div class="clear"></div>porque é apenas um truque que deixa sua marcação suja. Isso é inútil vazio divem termos de estrutura ruim e semântica, isso também torna seu código não flexível. Em alguns navegadores, essa div causa uma altura adicional e você precisa adicionar height: 0;ainda mais. Mas problemas reais começam quando você deseja adicionar um plano de fundo ou uma borda ao redor de seus elementos flutuantes - ele simplesmente entrará em colapso porque a Web foi mal projetada . Eu recomendo envolver elementos flutuantes em um contêiner que tenha a regra CSS do clearfix . Isso também é um truque, mas bonito, mais flexível de usar e legível para robôs humanos e de SEO.

elky
fonte
Este outro post tem mais detalhes sobre clearfix: stackoverflow.com/questions/211383/…
Bill Hoag 8/04
2

Quando você deseja que um elemento seja colocado na parte inferior de outro elemento, use esse código em CSS. É usado para carros alegóricos.

Se você flutua conteúdo, pode flutuar para a esquerda ou direita ... portanto, em um layout comum, você pode ter uma navegação à esquerda, uma div de conteúdo e um rodapé.

Para garantir que o rodapé fique abaixo de ambos os flutuadores (se você flutuou para a esquerda e para a direita), coloque o rodapé como clear: both.

Dessa forma, ele permanecerá abaixo dos dois carros alegóricos.

(Se você estiver apenas limpando a esquerda, precisará apenas fazê-lo clear: left;.)

Siga este tutorial:

Saeed
fonte
3
Qual tutorial?
Peter Mortensen