O que faz a seguinte regra CSS:

.clear { clear: both; }

E por que precisamos usá-lo?

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 ...

Exemplo ao vivo da imagem de demonstração.

Code For Demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

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 ..

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.

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

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

2º Exemplo

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.

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
----------------------------------

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS flutuante e claro

Sample Fiddle

Apenas tente remover a clear:bothpropriedade do divcom class samplee veja como segue flutuando divs.

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.

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: