Pourquoi les éléments flottants s'étendent-ils au-delà de leur conteneur parent ?

Pourquoi les éléments flottants s'étendent au-delà du Div contenant

Dans un div, lorsque les éléments reçoivent un flottant, ils peuvent s'étendre au-delà des limites du div. Cela se produit parce que les éléments flottants sont supprimés du flux normal du document, ce qui les amène à se positionner autour d'autres éléments au lieu d'être adjacents à eux. Par conséquent, ils ne contribuent pas à la largeur du div contenant.

Solutions pour étirer les éléments flottants

1. Overflow:hidden

Une solution simple consiste à ajouter overflow:hidden au div parent. Cela oblige à cacher tout ce qui dépasse les limites du parent :

#parent { overflow: hidden }

2. Div parent flottant

Une autre option consiste à faire flotter également le div parent :

#parent { float: left; width: 100% }

Cela fait que le div parent se comporte comme un élément flottant, permettant aux éléments enfants flottants d'influencer son hauteur.

3. Clear Element

L'utilisation d'un élément clear peut également résoudre le problème :

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="Pourquoi les éléments flottants s'étendent-ils au-delà de leur conteneur parent ?" >
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

L'élément clear interrompt le flux de l'élément enfant flottant, le poussant vers le bas de la division parent.

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!