Pourquoi mon élément flottant ne s'aligne-t-il pas correctement ?

Attente et réalité du comportement CSS Float

En CSS, la propriété float est couramment utilisée pour aligner les éléments horizontalement. Cependant, des comportements inattendus peuvent survenir lors de son utilisation avec d'autres éléments.

Le problème

L'exemple suivant illustre un malentendu courant :

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

Dans cet exemple, vous pouvez vous attendre à ce que le deuxième div (avec le fond jaune) s'aligne à droite du premier div. Cependant, comme le montre l'exemple réel, il occupe toujours toute la largeur de son conteneur.

Comprendre le comportement

Ce comportement est en fait le résultat attendu du positionnement du flotteur . Lorsqu'un élément flotte, le contenu suivant s'écoule sur le côté droit de cet élément. Cependant, la largeur du bloc conteneur (définie par l'élément suivant) est toujours réservée.

Conformément à la spécification CSS, les éléments de niveau bloc (tels que div et p) qui sont non positionné, ne tenez pas compte du flotteur. Les boîtes de ligne, quant à elles, coulent le long du côté du flotteur, mais leur largeur est raccourcie.

La solution

Pour obtenir le résultat attendu, où la deuxième div s'aligne correctement, vous pouvez ajouter une propriété de débordement avec une valeur autre que visible pour le deuxième div. Cela l'empêche de chevaucher l'élément flottant, comme spécifié dans la spécification CSS niveau 2.1.

Exemple

<code class="css">.yellow {
    overflow: hidden;
}</code>

Avec cet ajout, le deuxième div ne sera plus s'étendre au-delà de l'élément flottant, créant l'alignement souhaité.

Objectif du chevauchement

Le chevauchement est utile dans les situations où le contenu suivant est suffisamment long pour continuer au-delà de l'élément flottant. Si le chevauchement était restreint par défaut, le contenu ne continuerait pas sous l'élément flottant, créant des résultats inattendus.

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!