Pourquoi ma marge supérieure est-elle ignorée après un élément flottant en CSS ?

Marge supérieure ignorée après un élément flottant : compréhension du flux CSS

Malgré la définition minutieuse d'une marge supérieure pour un div, vous pouvez rencontrer un scénario dans lequel la marge est ignorée lorsque le div précédent flotte. Ce comportement découle de la spécification CSS, qui stipule que les éléments flottants sont considérés en dehors du flux normal. Par conséquent, les éléments de bloc non positionnés créés avant ou après un élément flottant se comportent comme si le flottant n'existait pas.

Exemple de code

Considérez le code HTML suivant :

<div>

Dans cet exemple, le deuxième div a une marge supérieure de 90 px. Cependant, dans Firefox et IE8, le deuxième div semble toucher le premier div, sans la marge supérieure visible.

Solution : Créer un wrapper

Pour résoudre ce problème, un simple et efficace La solution consiste à envelopper le deuxième div dans un autre div :

<div>

Dans ce code révisé, la propriété padding-top du wrapper div définit l'espace entre le wrapper et son contenu. Il est important de noter que ce remplissage est appliqué en interne, ce qui signifie qu'il n'affecte aucun élément externe, tel que le div flottant. En conséquence, le deuxième div est désormais correctement séparé du div flottant, malgré l'interférence du div flottant dans le flux normal.

Conclusion

Comprendre le flux CSS et l'impact des éléments flottants est crucial dans la conception de la mise en page. En comprenant ces concepts et en employant les solutions appropriées, telles que l'habillage des éléments avec un remplissage interne, vous pouvez garantir que vos pages Web s'affichent comme prévu, même lorsque des éléments flottants sont présents.

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!