Disposition CSS - clair et clearfix

Table des matières

    Afficher la table des matières

La propriété CSS clear

Lorsque nous utilisons la propriété float et que nous voulons l'élément suivant en dessous (ni à droite ni à gauche), nous devrons utiliser le clear propriété.

La propriété clear spécifie ce qui devrait se produire avec l'élément qui se trouve à côté d'un élément flottant.

La propriété clear peut avoir l'une des propriétés valeurs suivantes :

none

- L'élément n'est pas poussé sous les éléments flottants gauche ou droit. C'est par défaut

left

- L'élément est poussé sous les éléments flottants de gauche

right

- L'élément est poussé en dessous des éléments flottants à droite

both

- L'élément est poussé sous les éléments flottants gauche et droit

inherit

- L'élément hérite de la valeur clear de son parent

Lors de la suppression des flottants, vous devez faire correspondre le clear au float : si un élément est flotté vers la gauche, alors vous devez dégager vers la gauche. Votre élément flottant continuera à flotter, mais l'élément effacé apparaîtra en dessous sur le Web page.

Exemple

Cet exemple efface le flotteur vers la gauche. Ici, cela signifie que le L'élément est poussé sous l'élément flottant à gauche :

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

Essayez-le vous-même →

<!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>

Le hack clearfix

Si un élément flottant est plus grand que l'élément contenant, il "débordera" à l'extérieur de son conteneur. Nous pouvons ensuite ajouter un hack clearfix à résoudre ce problème:

Without Clearfix

With Clearfix

Exemple

.clearfix {
  overflow: auto;
}

Essayez-le vous-même →

<!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>

Le overflow: auto clearfix fonctionne bien tant que vous êtes capable de garder le contrôle de vos marges et de votre remplissage (sinon vous peut voir des barres de défilement). Le Le nouveau hack clearfix moderne est cependant plus sûr à utiliser et le code suivant est utilisé pour la plupart des pages Web :

Exemple

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

Essayez-le vous-même →

<!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>

Vous en apprendrez plus sur le pseudo-élément ::after dans un chapitre ultérieur.