Exemples de 6 façons d'effacer les flottants en html_CSS/HTML

Que se passera-t-il lorsque display: inline-block est utilisé :

1. Faites en sorte que l'élément de bloc s'affiche sur une seule ligne
2. Définissez la largeur et la hauteur du support en ligne<.>3. Les sauts de ligne sont analysés
4. Lorsqu'ils ne sont pas définis, la largeur est agrandie par le contenu
5. Dans IE6 et 7, les balises de bloc sont prises en charge

Parce que l'attribut inline-block est analysé lors des sauts de ligne (avec espace), la solution est donc d'utiliser float float: left/right

Situation qui se produit lors de l'utilisation de float:

1 Faire en sorte que l'élément de bloc s'affiche en un. line
2. Faire en sorte que l'élément en ligne prenne en charge la largeur Height
3. Lorsque la largeur et la hauteur ne sont pas définies, la largeur est prise en charge par le contenu
4. , vous pouvez utiliser des flotteurs pour combler les espaces)
5. Ajouter des flotteurs aux éléments , se détachera du flux de documents et se déplacera dans une direction spécifiée jusqu'à ce qu'il atteigne la limite du parent ou qu'un autre élément flottant s'arrête (le flux de documents est la position occupée par les objets affichables dans le document lorsqu'ils sont disposés)

Copier le code Le code est le suivant :

div1

div2

span1
span2
< ;/body>

Dans le code ci-dessous, seule box1 flotte, donc box1 et box2 se chevauchent. Si les deux flottent, il n'y aura pas de chevauchement

Copier le code Le code est le suivant :

< ;!DOCTYPE HTML>

Méthodes pour effacer les flottants :

1. Ajouter des flottants au parent (dans ce cas, la marge parent : 0 auto ; ne sera pas centrée)

Copier le code Le code est le suivant :

< head>


< style> ;
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left ; }
/*
Effacer le flotteur
1. Ajouter le flotteur au parent (qui n'est plus centré)
*/

 

2. Ajoutez display:inline-block; au parent (identique à la méthode 1, non centré. Seuls IE6 et 7 sont centré )

Copier le code Le code est le suivant :

 

3. Ajoutez

.clear{ height:0px sous l'élément flottant ;font -size:0;clear:both;} Cependant, sous IE6, l'élément block a une hauteur minimale, c'est-à-dire que lorsque height

Copier le code Le code est le suivant :

< ;html>



.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
Clear float
1. Ajoutez un float au parent
2. Ajoutez display:inline-block au parent
3. Ajoutez

élément flottant

.clear{ height:0px;font-size:0;clear:both;}
4. Ajoutez

sous le élément flottant */

 

   

5. Ajoutez {zoom:1;}
:after{content:""; display:block;clear:both;}

Copier le code Le code est le suivant :

6 .Ajouter overflow:auto;

Copiez le code Le code est le suivant :

< div class= "box">