Como a limpeza do CSS realmente funciona?

Question

eu tenho um <div> Que eu quero estar em uma linha por si só. De acordo com W3schools, Esta regra:

div.foo {
  clear: both;
}

... deve significar isso:

"Nenhum elemento flutuante permitido no lado esquerdo ou direito."

No entanto, se eu flutuar dois <div> Elementos restantes e aplique a regra acima ao primeiro, o segundo não se move.

Por outro lado, se eu aplicar "clear: left" para o segundo <div>, ele se move para a próxima linha. Esta é minha abordagem normal, mas não entendo por que tenho que fazer assim.

A descrição do W3Schools acima está mal declarada, ou estou perdendo alguma coisa? Uma regra de compensação é capaz de mover apenas o elemento ao qual é aplicado?

Responda

Obrigado Michael e John D pelas boas explicações. Warren apontou A especificação CSS2, e foi aí que encontrei esta resposta (ênfase minha):

Esta propriedade indica quais lados das caixas de um elemento (s) podem não ser adjacentes a um mais cedo caixa flutuante.

Então: clear afeta apenas a posição do elemento ao qual é aplicado, em relação aos elementos que aparecem antes dele.

Decepcionante que eu não posso dizer meu <div> Para fazer com que outras divs se movam para baixo, mas eles são os intervalos. :)

Answer 1

Quando você se aplica a um elemento, ele moverá esse elemento para que ele não tenha itens à esquerda ou à direita dele. Ele não reposiciona nenhum dos outros elementos, simplesmente move o elemento para uma posição onde nada está ao seu redor.

Editar

Os itens acima do item limpo não são movidos, os itens abaixo do elemento podem ser movidos. Observe também o comentário adicional nos comentários

Answer 2

Seu CSS está analisando "corretamente". Sua segunda div ainda está flutuando à esquerda, portanto, mesmo depois de limpar o primeiro, se houver largura de espaço para o segundo, ele caberá flutuado à esquerda no ponto superior que puder.

Answer 3

Sim, a limpeza apenas move o elemento ao qual é aplicado. No entanto, o resultado parece diferente, dependendo se o elemento está "no fluxo" ou fora do fluxo. Eu acho que isso está confundindo você.

Se o elemento estiver em fluxo, a limpeza o move para baixo com tudo o que se segue. Pense nisso como a posição de caneta atual em movimento (o local onde o próximo elemento deve ser colocado) para baixo. Esse comportamento é fácil de invadir.

Se o elemento estiver fora de fluxo, como o flutuador no seu exemplo, apenas o elemento é movido, a posição da caneta permanece no mesmo local, a menos que outras regras os façam se mover. Por exemplo, um flutuador não tem permissão para começar acima de uma bóia anterior.

Há também uma questão confusa do colapso da margem. A limpeza os interrompe, às vezes de uma maneira não intuitiva.

Answer 4

Você se aplica ao elemento que deseja em uma nova linha. O claro que você usa depende dos elementos que você não deseja tocá -lo. Se você deseja que a imagem B esteja em uma nova linha e não toque na imagem A (o que diz que é flutuante: à esquerda), você colocaria a imagem B como {limpa: esquerda} não está limpa à direita, como você pensaria naturalmente. Você está limpando o flutuador do elemento anterior.

Answer 5

Eu geralmente faço o seguinte para esse efeito:

float: left;
clear: right;

Não sei se isso se aplica apenas ao elemento ao qual é aplicado, embora faça sentido.

As especificações estão disponíveis aqui, no entanto: http://www.w3.org/tr/rec-css2/