Réaliser le centrage des frères et sœurs sans masquer les enfants dans un parent Overflow:hidden
En CSS, la propriété overflow:hidden est couramment utilisée sur le parent conteneurs pour s'adapter à la taille de leurs enfants flottants. Cependant, il a également un effet intéressant lorsqu'il est combiné avec margin:auto.
Lorsqu'un conteneur avec overflow:hidden et margin:auto a un frère précédent qui flotte, il apparaît à côté de l'élément flottant. Cela permet un placement centré entre plusieurs frères et sœurs flottants.
Cependant, cette disposition peut être perturbée si les enfants doivent être visibles à l'extérieur du conteneur sans masquer les éléments flottants. La méthode traditionnelle pour rendre le conteneur overflow:visible ignore la disposition flottante, tandis que l'effacement:à la fois et l'expansion du conteneur perturbent le centrage frère.
Solution utilisant Clearfix
Pour maintenir la disposition centrée tout en permettant aux enfants d'être visibles à l'extérieur du conteneur, la méthode clearfix peut être utilisée. En ajoutant la classe clearfix au parent et en supprimant overflow:hidden, la mise en page peut être préservée sans masquer les enfants.
Le CSS pour clearfix est fourni ci-dessous :
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */
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!