Os elementos flutuantes não aumentam a altura do elemento do contêiner e, portanto, se você não os limpar, a altura do contêiner não aumentará ...
Eu vou te mostrar visualmente:
Mais explicações:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
Você também pode adicionar overflow: hidden;elementos de contêiner, mas eu sugiro que você use clear: both;.
Além disso, se você quiser limpar um elemento automaticamente, poderá usar
.self_clear:after {
content: "";
clear: both;
display: table;
}
Como funciona o CSS Float?
O que é float exatamente e o que ele faz?
A floatpropriedade é incompreendida pela maioria dos iniciantes. Bem, o que exatamente faz float? Inicialmente, a floatpropriedade foi introduzida para fluir o texto em torno das imagens, que são flutuadas leftou right. Aqui está outra explicação de @Madara Uchicha.
Então, é errado usar a floatpropriedade para colocar caixas lado a lado? A resposta é não ; não há problema se você usar a floatpropriedade para definir caixas lado a lado.
A flutuação de um elemento inlineou blocklevel fará com que ele se comporte como um inline-blockelemento.
DemoSe você flutuar um elemento leftou right, o widthelemento será limitado ao conteúdo que ele contém, a menos que widthseja definido explicitamente ...
Você não pode floatum elemento center. Esse é o maior problema que eu sempre vi com iniciantes, usando float: center;floatpropriedade. floatgeralmente é usado para float/ mover o conteúdo para a esquerda ou para a direita . Existem apenas quatro valores válidos para a floatpropriedade left, ou seja right, none(padrão) e inherit.
O elemento pai entra em colapso, quando ele contém elementos filhos flutuantes, para evitar isso, usamos a clear: both;propriedade para limpar os elementos flutuantes em ambos os lados, o que impedirá o colapso do elemento pai. Para mais informações, você pode consultar minha outra resposta aqui .
(Importante) Pense nisso onde temos uma pilha de vários elementos. Quando usamos float: left;ou float: right;o elemento se move acima da pilha por um. Portanto, os elementos no fluxo normal de documentos se ocultam atrás dos elementos flutuantes porque estão no nível da pilha acima dos elementos flutuantes normais. (Por favor, não relacione isso z-indexcomo isso é completamente diferente.)
Tomando um caso como exemplo para explicar como as flutuações CSS funcionam, supondo que precisamos de um layout simples de 2 colunas com cabeçalho, rodapé e 2 colunas, então aqui está a aparência do blueprint ...
No exemplo acima, nós estaremos flutuante apenas as caixas vermelhas, ou você pode floattanto à left, ou você pode floatpara left, e outro para rightassim, depende do layout, se é 3 colunas, você pode float2 colunas para leftonde outro um rightdepende, embora neste exemplo, tenhamos um layout simplificado de 2 colunas, assim como floatum lefte outro right.
Marcação e estilos para criar o layout explicados mais adiante ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Vamos passo a passo com o layout e ver como o float funciona.
Primeiro de tudo, nós usamos o elemento envoltório principal, você pode simplesmente assumir que é a sua janela, então usamos headere atribuir um heightde 50pxmodo nada extravagante lá. É apenas um elemento normal de nível de bloco não flutuante que ocupará 100%espaço horizontal, a menos que seja flutuado ou que atribuímos inline-blocka ele.
O primeiro valor válido para floaté leftassim em nosso exemplo, usamos float: left;for .floated_left, então pretendemos flutuar um bloco no leftelemento do nosso container.
Coluna flutuada para a esquerda
E sim, se você vê, o elemento pai, que está .wrapperrecolhido, o que você vê com uma borda verde não se expandiu, mas deveria estar certo? Voltaremos a isso em um tempo, por enquanto, temos uma coluna flutuada para left.
Chegando à segunda coluna, deixa esta floataqui para oright
Outra coluna flutuou para a direita
Aqui, temos uma 300pxcoluna ampla na qual vamos floatpara right, que fica ao lado da primeira coluna à medida que flutua para o lefte, desde que flutuou para o left, ele criou uma calha vazia para o right, e como havia um amplo espaço no right, nosso righto elemento flutuado estava perfeitamente ao lado do leftoutro.
Ainda assim, o elemento pai está recolhido, bem, vamos corrigir isso agora. Existem várias maneiras de impedir que o elemento pai seja recolhido.
- Adicione um elemento de nível de bloco vazio e use
clear: both;antes que o elemento pai termine, que contém elementos flutuantes. Agora, essa é uma solução barata para clearseus elementos flutuantes, que fará o trabalho por você, mas eu recomendo não usá-lo.
Adicione, <div style="clear: both;"></div>antes do .wrapper divfinal, como
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Demo
Bem, isso corrige muito bem, não há mais pai recolhido, mas adiciona marcação desnecessária ao DOM, sugerem alguns, para usar overflow: hidden;no elemento pai que contém elementos filhos flutuantes que funcionam como pretendido.
Use overflow: hidden;em.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Demo
Isso nos poupa de um elemento toda vez que precisamos, clear floatmas ao testar vários casos com isso, ele falhou em um deles, que é usado box-shadownos elementos filhos.
Demo (Não é possível ver a sombra nos quatro lados,overflow: hidden;causa esse problema)
E agora? Salve um elemento, não overflow: hidden;faça uma correção clara, use o trecho abaixo em seu CSS e, assim como você usa overflow: hidden;para o elemento pai, chame o elemento classabaixo no elemento pai para limpar automaticamente.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Demo
Aqui, a sombra funciona como pretendido e também limpa automaticamente o elemento pai que impede o colapso.
E, finalmente, usamos o rodapé depois cleardos elementos flutuantes.
Demo
Quando é float: none;usado de qualquer maneira, como é o padrão, então qualquer uso para declarar float: none;?
Bem, depende, se você estiver buscando um design responsivo, usará esse valor várias vezes quando desejar que seus elementos flutuantes sejam renderizados um abaixo do outro em uma determinada resolução. Para essa float: none;propriedade desempenha um papel importante lá.
Poucos exemplos reais de como floaté útil.
- O primeiro exemplo que já vimos é criar um ou mais de um layout de coluna.
- O uso de
imgfloat inside pque permitirá que nosso conteúdo flua.
Demonstração (sem flutuaçãoimg)
Demo 2 (imgflutuou para oleft)
- Usando
floatpara criar o menu horizontal - Demo
Flutue o segundo elemento também, ou use `margin`
Por último, mas não menos importante, quero explicar esse caso específico em que você floatapenas um elemento para o leftmas não floato outro, então o que acontece?
Suponha que, se removermos float: right;do nosso .floated_right class, o divserá processado do extremo, leftpois não é flutuado.
Demo
Portanto, neste caso, seja possível floato para o leftbem
OU
Você pode usar o margin-leftque será igual ao tamanho da coluna flutuante esquerda, ou seja, 200pxlarga .