Comment préserver la visibilité flottante d'un enfant au-delà d'un débordement : parent caché ?

Préserver la visibilité des enfants flottants au-delà du parent Overflow:Hidden

En CSS, la propriété overflow:hidden peut être appliquée aux conteneurs parents pour garantir qu'ils s'étendent verticalement pour accueillir les enfants flottants. Cependant, cette propriété présente également un comportement intéressant lorsqu'elle est utilisée en conjonction avec margin:auto.

Lorsqu'un conteneur parent avec overflow:hidden et margin:auto est frère d'un élément flottant, il apparaîtra à côté de cet élément. . Cela signifie que si le frère ou la sœur flotte vers la gauche, le conteneur parent sera poussé vers la droite et centré entre les éléments flottants.

Bien que ce comportement puisse être utile dans certains scénarios, il peut y avoir des cas où vous souhaitez conserver cette disposition sans masquer les éléments enfants. Cela peut être un défi car overflow:visible désactive l'effet de préservation de la mise en page, ce qui fait que les éléments enfants sont couverts par le conteneur parent.

Solution utilisant la technique clearfix :

Pour résoudre ce problème, vous pouvez utiliser la technique clearfix, qui réalise la « préservation de la mise en page » sans recourir à overflow:hidden. Voici comment procéder :

1. Créez une classe clearfix avec les styles CSS suivants :

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */</code>

2. Ajoutez la classe clearfix au conteneur parent et supprimez le overflow:hidden propriété.

En appliquant la classe clearfix, vous pouvez conserver la disposition souhaitée, y compris le positionnement relatif des éléments flottants, tout en vous assurant que les éléments enfants ne sont pas masqués. Cette technique constitue une alternative appropriée au overflow:hidden lorsque vous devez préserver la hiérarchie visuelle et l'accessibilité des éléments en dehors du conteneur 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!