De nombreuses personnes ont étudié le problème de la fermeture des éléments flottants, mais les solutions sont différentes et toutes les méthodes ne sont pas parfaites. La fermeture des éléments flottants (ou la suppression des flottants) est un problème souvent rencontré dans la conception de standards Web. Par conséquent, je voudrais ici résumer plusieurs méthodes couramment utilisées et comparer leur facilité d'utilisation et leurs environnements applicables. Si vous avez une meilleure méthode, veuillez en discuter.
Le cas le plus simple est que nous incluons un petit élément div de largeur fixe (tel que la navigation, la référence, etc.) dans un grand div avec le contenu d'un autre élément. Par exemple, le code suivant :
<div id="outer">
<div id="inner"> <h2>Une colonne</h2> </div>
<h1>Contenu principal</h1>
<p>Lorem ipsum</p>
</div>
Nous pouvons définir une valeur de largeur (par exemple, 20 %) pour "#inner", mais comme div est un élément de niveau bloc, même si nous définissons la largeur, le contenu derrière celui-ci ne peut être affiché que dans la ligne suivante, sauf si nous définissons la largeur. donnez-lui Définir une propriété float (soit float vers la gauche, soit float vers la droite). Le problème que nous avons mentionné ci-dessus se posera alors à ce moment-là.
Ce ne sera pas un problème si "#inner" a une largeur et une hauteur plus petites que "#outer".
Cependant, si la hauteur de "#inner" dépasse la hauteur de "#outer", alors le bas de "#outer" dépassera le bas de "#outer". En effet, après avoir défini l'attribut float pour "#inner", il se détachera du flux de texte et, quelle que soit la modification de sa largeur et de sa hauteur, "#outer" ne suivra pas le changement.
Solution :
1) Méthode de balise supplémentaire
La première méthode et celle recommandée par le W3C consiste à utiliser des balises supplémentaires. Cette méthode consiste à ajouter une balise vide à la fin du contenu. Une approche typique consiste à utiliser quelque chose comme :
<br style="clear:les deux;" />
Ou utiliser
<div style="clear:both;"></div>
Cette méthode force le conteneur externe à se développer en ajoutant un élément HTML. Cependant, cette méthode ajoutera des balises supplémentaires et rendra la structure HTML moins concise.
Remarque : j'ai trouvé que dans Internet Explorer (que ce soit 6 ou 7) <br style="clear:both" /> peut effacer les éléments flottants, mais ne peut pas fermer les éléments flottants. Ce problème n'existe pas dans Firefox. Je ne sais pas pourquoi. ? !
2) Utilisez la pseudo-classe after
pour ajouter un nouveau contenu à la fin du contenu actuel spécifié en utilisant la pseudo-classe after et la déclaration de contenu. Une approche courante consiste à ajouter un « point » car il est plus petit et moins visible. Ensuite, nous l'utilisons pour effacer le float (fermer l'élément float) et masquer le contenu :
#extérieur :après{
contenu:".";
hauteur:0;
visibilité : masquée ;
affichage:bloc;
clair : les deux ;
Ce qui est étrange, c'est qu'Internet Explorer 6 et versions antérieures sous Windows ne prend pas en charge la pseudo-classe after dans CSS 2.1, mais Internet Explorer sous Mac peut être utilisé normalement, nous devons donc gérer Win/IE séparément. Parmi les nombreuses méthodes pour distinguer Internet Explorer sous Win et Mac, la méthode la plus couramment utilisée est l'astuce Holly, le code CSS :
/* Ce code ne peut être vu que par IE/Win*/
Règles CSS
/*End Hack */
Il y a deux lignes de commentaires dans le code ci-dessus, et une barre oblique inverse () apparaît à la fin de la première ligne. Internet Explorer sur Mac pensera que le commentaire n'est pas terminé, il continue donc jusqu'à la fin. première ligne. Un "*/" complet apparaît et tous les caractères du milieu sont considérés comme des commentaires, mais IE/Win ne considérera que les première et troisième lignes comme des commentaires, et celles du milieu sont des codes valides. Cela distingue donc IE sur différentes plates-formes.
Sur la base des principes ci-dessus, pour nettoyer les flottants sur IE 6 sous Windows, vous pouvez utiliser le code suivant :
#extérieur {
display:bloc en ligne ;
}
/* Holly Hack commence */
* html #extérieur {
hauteur : 1 % ;
}
#extérieur {
affichage:bloc;
}
/* Fin du piratage */
PS Si vous ne considérez pas les utilisateurs d'IE6/Mac, il vous suffit d'écrire * html #outer {height:1%;}.
De plus, il semble que display:inline-block ne fonctionne pas bien dans Internet Explorer 7. Utilisez donc les astuces Hack les plus complètes.
3) Faire flotter les éléments externes La
méthode float-in-float est très simple, qui consiste à faire flotter l'élément "#outer" (à gauche ou à droite).
Cependant, un autre problème causé par cette méthode est que l'élément suivant adjacent à "#outer" sera affecté par "#outer" et sa position changera, vous devez donc être prudent lorsque vous utilisez cette méthode. Il existe une option pour faire flotter tous les éléments de la page et enfin utiliser un élément significatif approprié (comme un pied de page) pour nettoyer les flottants. Cela permet de réduire les balisages inutiles, mais trop de flottants augmenteront la difficulté de mise en page.
4) Définissez le débordement sur caché ou auto.
Définissez la valeur de débordement de l'attribut "#outer" sur caché ou auto pour nettoyer également les flottants.
Cette méthode ne nécessite pas l'ajout de balises supplémentaires. Mais soyez prudent lorsque vous utilisez le débordement car cela affecte les performances du navigateur. De plus, le simple fait de définir le débordement sur masqué ou auto dans Internet Explorer 6 ne peut pas effacer efficacement le flottant (fermer l'élément flottant). Vous devez également spécifier une dimension de "#outer", c'est-à-dire spécifier une largeur ou une hauteur pour celui-ci. :
#extérieur {
débordement : auto ;
largeur : 100 % ;
}
Remarque : Si vous souhaitez utiliser cette méthode pour effacer les flottants (fermer les éléments flottants) sur IE5/Mac, vous devez définir l'attribut de débordement sur masqué.
Comparez et choisissez
laquelle des quatre méthodes est la meilleure ? Tout d'abord, il n'est pas recommandé d'utiliser la pseudo-classe after. Par rapport aux trois autres méthodes, l'astuce holly est un peu trop lourde et difficile à maîtriser. L'astuce holly que j'ai mentionnée ci-dessus n'est pas seulement un problème sur IE/. Win.Quand:hover apparaît, il y aura également d'autres problèmes, nous avons donc ajouté des attributs tels que inline-block, ce qui signifie qu'il y a plus d'incertitude dans cette méthode. Recommandé pour les personnes « propres » en matière de code et possédant des compétences techniques élevées.
Les trois autres méthodes peuvent alors être envisagées. Cependant, lors de l'utilisation du débordement, cela peut avoir un impact sur les performances de la page, et cet impact est incertain. Il est préférable de tester votre page sur plusieurs navigateurs
et pour utiliser des balises supplémentaires pour effacer les flottants (fermer l'élément float), c'est une pratique recommandée. par le W3C. Quant à savoir si vous souhaitez utiliser des éléments <br /> ou des <div></div> vides, vous pouvez choisir selon vos propres préférences (bien sûr, vous pouvez également utiliser d'autres éléments au niveau du bloc). Cependant, il convient de noter que <br /> lui-même a des performances. Il aura un saut de ligne supplémentaire, sa hauteur doit donc être définie sur 0 pour masquer ses performances. Ainsi, dans la plupart des cas, il est plus approprié d’utiliser un <div> vide.
Float-in-float est également un bon choix. Ajoutez simplement une couche de <div> à la couche externe de l'élément que vous souhaitez nettoyer et définissez l'attribut load:left, mais faites attention aux changements dans les éléments adjacents.