1. Fluxo Normal Do Documento
2. Secções Flutuadas Para A Esquerda
3. Elementos Flutuantes Limpos Para Esticar A Cor De Fundo Do Contentor

(ver ^[Clearfix] secção desta resposta para bela maneira de fazer isto. Estou a usar um exemplo vazio div intencionalmente para fins de explicação.

Já dei 3 exemplos acima, o primeiro é o fluxo normal do documento onde red o fundo irá aparecer como esperado, uma vez que o contentor não contém nenhum objecto flutuante.

No segundo exemplo, quando o objecto é flutuado para a esquerda, o elemento contentor (POOL) não saberá as dimensões dos elementos flutuantes e, portanto, não se estenderá aos elementos flutuantes altura.

Depois de utilizar clear: both;, o elemento contentor será esticado até às suas dimensões do elemento flutuante.

Outra razão pela qual o clear: both; é usado é para evitar que o elemento mude para cima no espaço restante.

1. div flutuou para a esquerda, resultando em section movimento para o espaço restante
2. Floated div cleared so that the section tag will render below the floated div s

Primeiro exemplo

2. º exemplo

Por último, mas não menos importante, a marca footer será renderizada após os elementos flutuantes, uma vez que usei a classe clear antes de declarar as minhas marcas footer, o que garante que todos os elementos flutuados (esquerda / direita) são esclarecidos para que ponto.

Pense nisto como um elemento virtual que irá criar um elemento vazio para si antes do seu elemento-mãe terminar. Isto vai limpar o seu elemento de embalagem segurando elementos flutuantes. Este elemento não VAI existir no teu DOM literalmente, mas vai fazer o trabalho.

Para limpar qualquer elemento de embalagem que tenha elementos flutuantes, podemos usar

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

Note o :after pseudo elemento usado por mim para esse class. Isso irá criar um elemento virtual para o elemento wrapper pouco antes de se fechar. Se olharmos no dom você pode ver como ele aparece na árvore de documentos.

Assim se você vê, é renderizado após o filho flutuado div onde limpamos os flutuadores que não são nada mais do que equivalente a ter um elemento vazio div com clear: both; propriedade que estamos a usar para isto também. Agora por que display: table; e content está fora deste escopo de respostas, mas você pode aprender mais sobre pseudo elemento aqui.

Note que isto também funcionará em IE8 como IE8 suporta :after pseudo.

Resposta Original:

A maioria dos programadores flutua o seu conteúdo para a esquerda ou para a direita no seu páginas, provavelmente divs holding logo,barra lateral, conteúdo, etc., estas divisórias são flutuadas à esquerda ou à direita, deixando o resto do espaço não utilizado e, portanto, se você colocar outros recipientes, ele flutuará também no espaço restante, de modo a evitar que clear: both; seja usado, ele limpa todos os elementos flutuados à esquerda ou à direita.

Demonstração:

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

Agora e se quiser fazer o outro div render abaixo div1, então vai usar {[[5]} para garantir que limpa todos os flutuadores, à esquerda ou direita

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------