Expérience DivCSS : trois méthodes CSS pratiques pour effacer les flotteurs

Lors de l'utilisation de la mise en page Web DivCSS, les flottants sont souvent utilisés. De nombreuses choses néfastes peuvent être causées par les flottants. Il existe de nombreuses introductions à la suppression des flottants dans le passé. La suppression des flotteurs est indispensable, et la suppression des flotteurs des éléments parents à tout moment est considérée comme l'une des bonnes habitudes en matière d'écriture CSS.

Regardons le didacticiel d'aujourd'hui. Il s'agit d'un code source flottant qui n'a pas été effacé. Vous ne pouvez pas voir le fond jaune clair de l'élément parent lors de l'exécution du code.


Comme indiqué sur la figure avant de dégager le flotteur :



1. Utilisez des étiquettes vides pour effacer les flotteurs

Une méthode que j'utilise depuis longtemps est que la balise vide peut être une balise div ou une balise P. J'ai l'habitude d'utiliser <P>, qui est assez court. Beaucoup de gens utilisent également <hr>, mais il leur suffit d'effacer la bordure, mais en théorie, il peut s'agir de n'importe quelle balise. Cette méthode consiste à ajouter une telle balise pour effacer float une fois que tous les éléments flottants à l'intérieur de l'élément parent flottant doivent être effacés, et à définir le code CSS correspondant : clear:both. L’inconvénient de cette approche est l’ajout d’éléments structurels dénués de sens.


2. Utilisez l'attribut overflow

Cette méthode résout efficacement l'inconvénient de devoir ajouter du code involontaire en effaçant les flottants à travers les éléments d'étiquette vides. Pour utiliser cette méthode, il vous suffit de définir la propriété CSS : overflow:auto dans l'élément qui doit être débarrassé du flottant, et c'est tout ! "zoom:1" est destiné à la compatibilité avec IE6.


3. Utiliser après le pseudo-objet pour flotter clairement

Cette méthode s'applique uniquement aux navigateurs non-IE. Veuillez vous référer aux exemples suivants pour connaître les méthodes d'écriture spécifiques. Veuillez faire attention aux points suivants lors de l'utilisation. 1. Dans cette méthode, height:0 doit être défini pour le pseudo-objet qui doit effacer l'élément flottant, sinon l'élément sera plusieurs pixels plus haut que la valeur réelle 2. L'attribut content est nécessaire, mais sa valeur peut être ; discussion idéale vide et bleue Dans cette méthode, la valeur de l'attribut content est définie sur ".", mais j'ai trouvé qu'il est également possible de le laisser vide.


Comme le montre la figure après un flottement clair :


Chacune de ces trois méthodes présente des avantages et des inconvénients, et vous devez choisir la meilleure lorsque vous les utilisez. En comparaison, la deuxième méthode est plus préférable.