Maison >interface Web >tutoriel CSS >Résumé des méthodes pour effacer les flotteurs flottants

Résumé des méthodes pour effacer les flotteurs flottants

高洛峰
高洛峰original
2017-03-16 10:34:521707parcourir

Abandonnez ces méthodes inutiles et rappelez-vous simplement la méthode la plus pratique !

Ajoutez un classattribut supplémentaire à l'élément parent qui doit être débarrassé du flottant : clearfix ! ! !

le style est le suivant :

.clearfix:after{
content: ".";
display:block;
 hauteur:0; 
clear:both; 
 visibilité:hidden; 7 (les projets actuels l'ont presque complètement ignoré)

. clearfix{

zoom:1

}

Effacer le flottant est si simple et peut être utilisé comme un common.css de style public, chaque page peut être appelée directement !

Exemple d'application simple :

 

  //qch 

 

  //qch 

Pourquoi devrions-nous effacer les flotteurs :

1 .Quand j'écrivais auparavant, je trouvais que les pages étaient gâchées au fur et à mesure que je les écrivais, et qu'il y avait aussi des chevauchements ? C’est le flottement qui est en cause !

2. Lorsque l'élément enfant sous l'élément parent flotte, la valeur de hauteur du parent peut être égale à 0. Par conséquent, après avoir utilisé float, ajoutez immédiatement clearfix au parent pour éliminer complètement les problèmes causés par float. Toutes sortes de questions bizarres !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn