CSS - claro e clearfix
A clear
propriedade especifica o que deve acontecer com o
elemento próximo a um elemento flutuante.
VALORES DO CLEAR:
Ø
none-
O elemento não é colocado abaixo dos elementos flutuantes esquerdo ou
direito. Isso é padrão
Ø
left-
O elemento é empurrado para baixo dos elementos flutuantes à esquerda
Ø
right-
O elemento é empurrado abaixo dos elementos flutuantes à direita
Ø
both-
O elemento é empurrado para baixo dos elementos flutuantes esquerdo e direito
Ø
inherit-
O elemento herda o valor clear de seu pai
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
padding: 10px;
border: 3px solid
#73AD21;
}
.div2 {
padding: 10px;
border: 3px solid
red;
}
.div3 {
float: left;
padding: 10px;
border: 3px solid
#73AD21;
}
.div4 {
padding: 10px;
border: 3px solid
red;
clear: left;
}
</style>
</head>
<body>
<h2>Sem claro</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Observe que div2
está após div1 no código HTML. No entanto, como div1 flutua para a esquerda, o
texto em div2 flui em torno de div1.</div>
<br><br>
<h2>com claro</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Aqui, claro: esquerda; move div4 para baixo
abaixo do div3 flutuante. O valor "left" limpa os elementos flutuados
à esquerda. Você também pode limpar "certo" e
"ambos".</div>
</body>
</html>
O hack clearfix
Se um elemento flutuante for mais alto que o elemento que o
contém, ele "transbordará" para fora de seu contêiner. Podemos
então adicionar um hack clearfix para resolver este problema:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid
#4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Sem Clearfix</h2>
<p>Esta imagem é flutuada para a direita. Também é
mais alto que o elemento que o contém, então transborda para fora de seu
contêiner:</p>
<div>
<img
class="img1" src="pineapple.jpg" alt="Pineapple"
width="170" height="170">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">Com
Clearfix</h2>
<p>Podemos consertar isso adicionando uma classe
clearfix com estouro: auto; ao elemento que o contém:W</p>
<div class="clearfix">
<img
class="img2" src="pineapple.jpg" alt="Pineapple"
width="170" height="170">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
o novo e moderno hack clearfix é
mais seguro de usar, e o código a seguir é usado para a maioria das páginas da
web:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid
#4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Sem Clearfix</h2>
<p>Esta imagem é flutuada para a direita. Também é
mais alto que o elemento que o contém, então transborda para fora de seu
contêiner:</p>
<div>
<img
class="img1" src="pineapple.jpg" alt="Pineapple"
width="170" height="170">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">Com o novo Clearfix
moderno</h2>
<p>Adicione o hack clearfix ao elemento que o contém,
para corrigir este problema:</p>
<div class="clearfix">
<img
class="img2" src="pineapple.jpg" alt="Pineapple"
width="170" height="170">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>