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 ...
/* 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--><divclass="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.
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.
(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.
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 .
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(FloatedLeft)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(FloatedLeft)------------------<div style="clear: both;"><!--This<div> acts as a separator--></div>----------------------------------Other div renders here now
----------------------------------
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.
@ 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
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.
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;.)
float
e quiser o próximo elemento abaixo, não à direita ou à esquerda.Respostas:
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 queclear: 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
Mostrar snippet de código
Nota: Você pode ter que adicionar
header
,footer
,aside
,section
(e outros elementos HTML5) comodisplay: 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 aaside
tag que eu usarei para a barra lateral do meu site, então flutuarei o elemento para a esquerda.Então, como você observa, a esquerda flutuada
div
deixa o espaço à sua direita sem uso, o que permitirá que odiv
depois alterne no espaço restante.div
renderizará um após o outro se NÃO estiverem flutuandodiv
deslocarão um ao lado do outro se flutuarem para a esquerda ou direitaOk, é 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
.clear
e ela contém uma propriedade chamadaclear
com um valor deboth
. Então, vamos ver por que ele precisaboth
.Eu flutuei
aside
esection
elementos à esquerda, então assuma um cenário, onde temos uma piscina, ondeheader
é terra firme,aside
esection
flutuamos 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.
(Consulte a seção [Clearfix] desta resposta para obter uma maneira clara de fazer isso. Estou usando um
div
exemplo vazio intencionalmente para fins de explicação)Eu forneci 3 exemplos acima, 1º é o fluxo normal de documentos, onde o
red
plano 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.
div
Flutuou para a esquerda, resultando nasection
mudança para o espaço restantediv
limpo para que asection
tag seja renderizada abaixo dosdiv
s flutuados1º exemplo
2º Exemplo
Por último, mas não menos importante, a
footer
tag será renderizada após os elementos flutuantes, como eu usei aclear
classe antes de declarar minhasfooter
tags, 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
div
elemento vazio que não é umdiv
elemento 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
Observe o
:after
pseudo elemento usado por mim para issoclass
. 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
div
flutuante, onde limpamos os carros alegóricos, que nada mais são do que equivalentes a ter umdiv
elemento vazio com aclear: both;
propriedade que estamos usando para isso também. Agora porquedisplay: 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
:after
pseudo .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:
Agora, e se você quiser fazer a outra div renderizar abaixo
div1
, use-aclear: both;
para garantir que você limpe todas as flutuações, esquerda ou direitafonte
display: inline-block
um elemento e no pai você pode usartext-align: left
,text-align: center
outext-align: right
por exemplo.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 flutuadosMostrar snippet de código
clear: left;
Elemento empurrado abaixo dos elementos flutuados à esquerdaMostrar snippet de código
clear: right;
Elemento empurrado abaixo dos elementos flutuados à direitaMostrar snippet de código
clear: both;
Elemento empurrado abaixo de todos os elementos flutuadosMostrar snippet de código
clear
não afeta carros alegóricos fora do contexto de formatação do bloco atualMostrar snippet de código
fonte
display: inline-block;
propriedade css desse cenário? Ele estenderá oinline-block
elemento pai ao seu elemento irmão que tem classefloat-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?display: inline-block
significa 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).CSS flutuante e claro
Sample Fiddle
Apenas tente remover a
clear:both
propriedade dodiv
comclass
sample
e veja como segue flutuandodivs
.fonte
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 vaziodiv
em 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 adicionarheight: 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.fonte
clearfix
: stackoverflow.com/questions/211383/…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:
fonte