Résumer plusieurs méthodes d'effacement des flottants en CSS et comment gérer la compatibilité

Cet article présente principalement le résumé et le traitement de compatibilité de sept méthodes courantes pour effacer le flotteur flottant en CSS. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Nous devons comprendre deux choses avant. clearing float. Une définition importante :

La définition du flottant  : permet à l'élément de se détacher du flux de documents, de se déplacer dans la direction spécifiée et de s'arrêter lorsqu'il rencontre la limite parent ou adjacente. éléments flottants.

Réduction de la hauteur : La hauteur de l'élément parent de l'élément flottant est adaptative (lorsque l'élément parent n'écrit pas de hauteur et que l'élément enfant écrit float, la hauteur de l'élément parent l'élément s'effondrera)

Après avoir connu les flotteurs et pourquoi ils doivent être effacés, nous pouvons commencer à apprendre comment effacer les flotteurs. À ce stade, nous devons utiliser l'attribut clear of floats,
clear: left | right | les deux | aucun hériter : une certaine direction de l'élément Il ne peut y avoir aucun élément flottant sur
clear:both : les éléments flottants ne sont pas autorisés sur les côtés gauche et droit.

Les principales méthodes de flottement clair sont les suivantes :

1. >

Ajoutez un p vide sous l'élément flottant et écrivez le style CSS à l'élément :

 {clear:both;height:0;overflow:hidden;}

2. Méthode : Donner float Définir la hauteur de l'élément parent

Nous savons que l'effondrement de la hauteur est causé par la hauteur adaptative du parent de l'élément flottant. Nous pouvons ensuite résoudre ce problème en lui définissant une hauteur appropriée. .

Inconvénients : Non applicable lorsque la hauteur de l'élément flottant est incertaine

3. Méthode : flotter (le parent flotte en même temps)

. Que signifie « flotter pour flotter » ? C'est pour que le parent de l'élément flottant flotte également.

Inconvénients : Vous devez ajouter des flotteurs au parent de chaque élément flottant. Trop de flotteurs peuvent facilement causer des problèmes.

4. Méthode : définissez le parent sur inline-block

Inconvénients : Les marges gauche et droite du parent ne sont pas valides et ne peuvent pas être utilisées. Marge : 0 auto. ; centré

5. br clear float

<p class="box">
    <p class="top"></p>
    <br clear="both" />
</p>

la balise br a son propre attribut clear, définissez-la sur et ajouter un p vide Le principe est le même.

Problème : Il ne répond pas aux exigences de séparation de la structure, du style et du comportement au travail.

6. Ajouter la méthode overflow:hidden clear float au parent

Problème : besoin de faire correspondre la largeur ou le zoom pour être compatible avec IE6 IE7 ;

overflow: hidden;
*zoom: 1;

7. Méthode de compensation universelle après le flottement clair de pseudo-classe (maintenant la méthode traditionnelle, recommandée)

En même temps, pour être compatible avec IE6 et 7, il doit également être utilisé avec zoom. Par exemple :

选择符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }

.

Choses à noter :

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}

après la pseudo-classe : à l'intérieur de l'élément Ajouter du contenu à la fin

 : après {content"added content" ;} IE6, 7 n'est pas compatible

zoom zoom

a. Déclenchez haslayout sous IE pour que l'élément calcule la largeur et la hauteur en fonction de son propre contenu. b. FF n'est pas pris en charge ;

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!