Pourquoi la marge supérieure ne fonctionne-t-elle pas après un élément flottant en HTML ?

Pourquoi la marge supérieure de l'élément HTML est-elle ignorée après l'élément flottant ?

En CSS, un élément flottant est supprimé du flux normal du document, ce qui permet d'autres éléments pour l'entourer. Cependant, ce comportement peut conduire à des résultats inattendus lorsque l'on tente d'appliquer une marge supérieure à un élément après le flottant.

Selon la spécification CSS, "Puisqu'un flottant n'est pas dans le flux, les boîtes de bloc non positionnées créé avant et après le flux de la boîte à flotteur verticalement comme si le flotteur n'existait pas. Par conséquent, la marge supérieure de l'élément suivant est essentiellement ignorée dans les calculs du navigateur.

Pour résoudre ce problème, une approche courante consiste à envelopper l'élément suivant dans un conteneur et à appliquer un remplissage au wrapper au lieu de la marge. à l'élément. Cela crée efficacement un espace blanc interne qui reste indépendant des éléments externes, permettant à la marge supérieure de fonctionner comme prévu.

Exemple :

Dans l'exemple de code HTML ci-dessous, le flottant <div> empêche la marge du <div> de prendre effet :

<div>

Pour résoudre ce problème, nous pouvons envelopper le <div> dans un wrapper et appliquons plutôt un rembourrage au wrapper :

<div>

En utilisant cette technique, nous créons efficacement un "tampon" entre l'élément flottant et l'élément suivant, garantissant que la marge supérieure est appliquée de manière appropriée et appliqué.

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!