Quel est l'impact de « débordement : caché » sur les éléments flottants dans un placement de texte `` et ultérieur ?

Débordement CSS : caché avec les flotteurs expliqués

Question : Comment la propriété de débordement affecte-t-elle le placement du texte relatif à un ul contenant flotté éléments ?

Explication :

Par défaut, les éléments de niveau bloc comme ul et p s'étendent jusqu'à 100 % de la largeur du parent. Dans l'exemple donné, l'ul contient uniquement des éléments li flottants, ce qui le fait s'effondrer à une hauteur de 0px tout en conservant sa pleine largeur.

En conséquence, l'élément p adjacent apparaît à droite de l'élément flottant. li, en les traitant comme des flottants normaux.

Cependant, lorsque overflow:hidden est appliqué à ul, il établit un nouveau contexte de formatage de bloc (BFC), qui contient effectivement les éléments li éléments dans le ul. Cela empêche l'effondrement de l'ul et force l'élément p à être poussé vers le bas, effaçant ainsi les éléments li flottants.

Détails techniques :

Selon la spécification CSS , lorsque le débordement est visible pour les éléments non remplacés au niveau du bloc dans le flux normal, ils se comportent comme des éléments de bloc standard. Cependant, définir le débordement sur toute valeur non visible (y compris masquée) crée un BFC, ce qui entraîne un comportement différent.

Exemple :

Considérez le code suivant :

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  border: 2px solid red;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #555;
  color: white;
}

p {
  margin: 0;
  outline: 2px dotted blue;
}

#two {
  clear: both;
  overflow: hidden;
}

Sans Overflow :

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p>
  Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats
</p>

Avec Overflow :

<ul>

Comme vous pouvez le voir, l'application de overflow:hidden à ul force les éléments li flottants à être contenu dans l'ul et efface l'élément p, en le poussant vers le bas de la page.

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!