Éléments flottants en HTML et CSS : comment affectent-ils encore le flux des pages ?

Éléments flottants : naviguer dans le flux

En HTML et CSS, les éléments flottants sont un concept clé dans la mise en page et la conception. Cependant, comprendre leur comportement peut être un peu délicat. Plongeons dans le monde des éléments flottants et explorons quelques questions courantes.

« Restant toujours une partie du flux »

Les éléments flottants sont souvent décrits comme étant supprimés de le flux normal de la page, tout en en faisant toujours partie. Ce concept peut prêter à confusion au début, surtout si l'on observe que les éléments flottants peuvent chevaucher d'autres éléments.

La clé pour comprendre cela est que les éléments flottants continuent d'affecter le flux du texte et des éléments en ligne. Même s'ils sont retirés de la présentation physique de la page, ils influencent toujours la façon dont le texte les entoure. C'est pourquoi ils sont considérés comme « faisant toujours partie du flux ».

Par exemple, considérons l'exemple de code HTML et CSS :

<code class="html"><section>
  <div class="left">Left</div>
  <div class="left_second">Middle</div>
  <div class="right">Right</div>
</section></code>

<code class="css">section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  background: blue;
}

.right {
  float: right;
  background: cyan;
}</code>

Lorsque nous ajoutons le flottant : gauche; propriété au premier div .left, il se déplace vers le côté gauche du conteneur, permettant au texte de s'enrouler autour de lui. Les deuxième et troisième divs sont positionnés normalement par rapport au premier div. Cela démontre que même si le premier div flotte, il influence toujours le flux du texte qui l'entoure.

En dehors du bloc conteneur

Voyons maintenant pourquoi le la troisième div est en dehors du bloc conteneur. Dans l'exemple de code, le bloc conteneur est le

élément. Puisque le troisième div .right a float: right;, il se déplacera vers le bord droit du bloc conteneur.

Si le bloc conteneur n'a pas assez de largeur pour accueillir l'élément flottant, il se répandra à l'extérieur du bloc. Dans ce cas, le bloc conteneur est trop étroit pour la troisième div, il déborde donc et apparaît en dehors de la section.

Pour éviter cela, nous pouvons soit augmenter la largeur du bloc conteneur, soit utiliser la technique clearfix pour éléments flottants clairs. La technique clearfix consiste à ajouter un élément caché avec clear: Both; pour forcer le bloc contenant à contenir tous ses éléments flottants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!