Un moyen très simple de fermer les éléments flottants_CSS/HTML

Un très bon petit conseil que j'ai vu par hasard. Il s'agit d'utiliser CSS pour gérer les éléments flottants fermés.

Il existe de nombreuses méthodes pour fermer les éléments flottants (effacer float). vous en savez plus, consultez le blog d'old9. Il y a un article sur la fermeture des éléments flottants.

Ma méthode préférée est d'utiliser la pseudo-classe :after pour intégrer dynamiquement un élément afin d'effacer les éléments flottants. Malheureusement, la quantité de code est trop importante et elle n'a pas l'air assez concise. Maintenant, je vois qu'il existe une méthode super simple. Permettez-moi de le présenter rapidement. Le texte original se trouve à l'adresse : http://annevankesteren.nl/2005/03/clearing-floats

Le principe est le suivant. La raison pour laquelle les éléments périphériques ne peuvent pas être bien étendus est le débordement. . allumé, car le débordement n'est pas visible. Voir l'explication du W3C

Contenu de la citation :

De plus, si l'élément a des descendants flottants dont le bord de la marge inférieure est en dessous du bas, alors la hauteur est augmentée pour inclure ces bords. Seuls les flotteurs qui sont des enfants de l'élément lui-même ou des descendants dans le flux normal sont pris en compte. en compte, par exemple, les flotteurs à l'intérieur des descendants en position absolue ou les autres flotteurs ne le sont pas.

Il suffit maintenant d'ajouter un overflow:auto; à l'élément périphérique pour résoudre le problème, le résultat est qu'à l'exception d'IE, cela peut vraiment. être résolu. Le problème d'IE sera ensuite résolu. Ajoutez _height:1%;

Voici trois exemples que j'ai faits à titre de comparaison

1.Aucun élément flottant fermé
2.Élément flottant fermé sous non-IE
3.Élément complètement fermé

<p> </p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Flotteurs de d茅gagement super simples</title> <style type="text/css"> <!-- corps{ police : .9em/150 % Verdana, Arial, Helvetica, sans-serif couleur normale :#333333 ;} h1{ arri猫re-plan</style>