Layout CSS - claro e claro

Índice

    Mostrar índice

A propriedade CSS clear

Quando usamos a propriedade float e queremos o próximo elemento abaixo (não à direita ou à esquerda), teremos que usar o clear propriedade.

A propriedade clear especifica o que deve acontecer com o elemento que está próximo a um elemento flutuante.

A propriedade clear pode ter um dos seguintes valores:

none

- O elemento não é empurrado abaixo dos elementos flutuantes à esquerda ou à direita. Este é o padrão

left

- O elemento é empurrado abaixo dos elementos flutuantes à esquerda

right

- O elemento é empurrado abaixo dos elementos flutuantes à direita

both

- O elemento é empurrado abaixo dos elementos flutuantes esquerdo e direito

inherit

- O elemento herda o valor clear de seu pai

Ao limpar floats, você deve combinar o clear com o float: Se um elemento flutua para a esquerda, então você deve limpar para a esquerda. Seu elemento flutuante continuará flutuando, mas o elemento desmarcado aparecerá abaixo dele na web página.

Exemplo

Este exemplo limpa o float para a esquerda. Aqui, significa que o O elemento é colocado abaixo do elemento flutuante à esquerda:

div1 {
  float: left;
}
div2 {
  clear: left;
}

Experimente você mesmo →

<!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>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

O hack do clearfix

Se um elemento flutuante for mais alto que o elemento que o contém, ele irá "transbordar" para fora de seu contêiner. Podemos então adicionar um hack clearfix para Resolva esse problema:

Without Clearfix

With Clearfix

Exemplo

.clearfix {
  overflow: auto;
}

Experimente você mesmo →

<!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>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</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">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</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>
</html>

O overflow: auto clearfix funciona bem desde que você consiga manter o controle de suas margens e preenchimento (caso contrário, você pode ver barras de rolagem). O novo e moderno hack do clearfix, no entanto, é mais seguro de usar, e o código a seguir é usado para a maioria das páginas da web:

Exemplo

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Experimente você mesmo →

<!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>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</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">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</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>
</html>

Você aprenderá mais sobre o pseudoelemento ::after em um capítulo posterior.