Méthode de compatibilité CSS clear float

Cette fois je vais vous apporter la méthode de compatibilité cssclear floatfloat, quelles sont les précautions de la méthode css clear float float compatibilité, ce qui suit est un cas pratique, allons réunissez-vous Jetez un oeil.

Nous devons comprendre deux définitions importantes avant d'effacer les flottants :

La définition de float : faire en sorte que l'élément se détache du flux de documents, se déplace dans la direction spécifiée, et rencontrent les limites du niveau parent ou les éléments flottants adjacents sont arrêtés.

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 pour l'élément :

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

Méthode : Définir la hauteur du parent de l'élément flottant <.>Nous savons que l'effondrement en hauteur est provoqué par la hauteur adaptative du parent de l'élément flottant, nous pouvons donc 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

la balise br a son propre attribut clear La définir sur les deux revient en fait à ajouter un p vide.

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

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 ;

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

overflow: hidden;
*zoom: 1;

En même temps, afin d'être compatible avec IE6, 7 doit également être utilisé avec zoom. Par exemple :

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

Points à noter :

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

après la pseudo-classe : ajoutez du contenu à la fin de l'élément ; >

:after{content "added content";} Incompatible sous IE6 et 7

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 ;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de focus-within

Explication détaillée de l'utilisation de pseudo- éléments ::avant et ::après

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!