O que a regra CSS "claro: ambos" faz?
O Que Faz a seguinte regra do CSS:
.clear { clear: both; }
E porque precisamos de usá-lo?
5 answers
Eu não vou explicar como os flutuadores funcionam aqui (em detalhes), uma vez que esta pergunta geralmente se concentra em Por que usar clear: both;
ou o que faz clear: both;
exatamente fazer...
Vou manter esta resposta simples, e ao ponto, e vou explicar-lhe graficamente porque {[[5]} é necessário ou o que faz...
Geralmente designers flutuam os elementos, para a esquerda ou para a direita, o que cria um espaço vazio do outro lado que permite que outros elementos ocupem o restante espaco.
Porque flutuam elementos?Os elementos são flutuados quando o desenhador precisa de 2 elementos de nível de bloco lado a lado. Por exemplo, dizer que queremos projetar um site básico que tem um layout como abaixo...
Exemplo ao vivo da imagem demo.
Código Para A 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 HTML5 elementos) como display: block;
na sua folha de estilo por mencionar explicitamente que os elementos são elementos de nível de bloco.
Explicação:
Tenho uma disposição básica, 1 cabeçalho, 1 barra lateral, 1 área de Conteúdo e 1 rodapé.
Sem carros alegóricos para header
, a seguir vem a etiqueta {[[10]} que eu vou usar para a minha barra lateral do site, então eu vou estar flutuando o elemento para a esquerda.
Nota: Por omissão, o elemento nível do bloco assume o documento 100% de largura, mas quando flutuava para a esquerda ou para a direita, ele vai dimensionar de acordo com o content it holds.
- Comportamento Normal Do Elemento De Nível Do Bloco
- Comportamento Flutuado Do Elemento De Nível Do Bloco
Assim como você nota, a esquerda flutuou div
deixa o espaço para a sua direita não utilizado, o que permitirá que o div
Depois que ele mudar no espaço restante.
div
's irá renderizar um após o outro se eles não forem flutuadosdiv
will deslocar-se ao lado um do outro, se flutuado à esquerda ou à direita
Ok, então é assim que os elementos de nível de bloco se comportam quando flutuam para a esquerda ou para a direita, então agora porque é que clear: both;
é necessário e porquê?
Estou a usar uma classe chamada .clear
e tem uma propriedade chamada clear
com um valor de both
. Então vamos ver porque precisa.
Eu flutuei aside
e section
elementos para o esquerda, então assuma um cenário, onde temos uma piscina, onde header
é terra sólida, aside
e section
estão flutuando na piscina e o rodapé é terra sólida novamente, algo assim..
- Fluxo Normal Do Documento
- Secções Flutuadas Para A Esquerda
- 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.
div
flutuou para a esquerda, resultando emsection
movimento para o espaço restante-
Floated
div
cleared so that thesection
tag will render below the floateddiv
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.
Clearfix Estou a chegar a clearfix, que está relacionado com carros alegóricos. Como já foi especificado por @Elky , a forma como estamos a limpar estes flutuadores não é uma forma limpa de o fazer, uma vez que estamos a usar um elemento vazio
div
que não é um elemento div
para o qual se destina. Daí vem o clearfix.
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
----------------------------------
clear
a propriedade indica que a esquerda, a direita ou ambos os lados de um elemento não podem ser adjacentes a elementos flutuados anteriores dentro do mesmo contexto de formatação de blocos. Os elementos compensados são empurrados abaixo dos elementos flutuados correspondentes. Exemplos:
clear: none;
O elemento permanece adjacente aos elementos flutuantes
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 da esquerda flutuado elementos
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 flutuantes à 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 flutuantes
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 afecta os flutuadores fora do actual contexto de formatação de blocos
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>
Apenas tente remover {[[0]} propriedade do div
com class
sample
e ver como se segue flutuando.
div
em termos de má estrutura e semântica, isto também torna o seu código não flexível. Em alguns navegadores este div causa altura adicional e você tem que adicionar height: 0;
o que é ainda pior. Mas os problemas reais começam quando você quer adicionar fundo ou border em torno de seus elementos flutuados-ele apenas irá colapsar porque web foi projetado muito mal. Eu recomendo embrulhar os elementos flutuados num contentor que tem a regra clearfix CSS. Este é hack também, mas bonito, mais flexível para usar e legível para humanos e robôs SEO.
Quando quiser colocar um elemento na parte inferior do outro elemento, use este código em CSS. É usado para flutuadores.
Se flutuar o conteúdo, poderá flutuar para a esquerda ou para a direita... então, em um layout comum você pode ter um nav esquerdo, um div de Conteúdo e um rodapé.
Para garantir que o rodapé permanece por baixo destes dois flutuadores (se tiver flutuado para a esquerda e para a direita), então coloca o rodapé como {[[0]}.
Assim ficará abaixo dos dois carros alegóricos.(Se você só está limpando para a esquerda então só precisas de o fazer.)
Passa por este tutorial: