Comparaison de l'attribut CSS float et de la position : absolue

Je crois que beaucoup de gens se posent cette question. Lequel est le meilleur, float ou position:absolute, dans la mise en page ? Puisqu'il s'agit d'une mise en page, il est préférable d'utiliser float, que j'utilise plus souvent. Ce flotteur peut être effacé et n’affectera généralement pas la disposition globale. Et la position, le positionnement, n'est pas contraint. Il semble que ce ne soit pas une mise en page. Généralement, si vous souhaitez effectuer un positionnement spécial ou des calques flottants, vous pouvez envisager de l'utiliser. Pour une mise en page normale, je recommande personnellement d'utiliser l'attribut FLOAT

1.float pour définir la direction dans laquelle l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit. p est un élément typique de niveau bloc qui occupe lui-même une ligne.

Voyons d'abord comment sont disposés les éléments les plus élémentaires au niveau des blocs. code html, les styles suivants sont basés sur celui-ci.

Copier le code Le code est le suivant :

​​​box3"> ;
Cadre 3
Cadre 3
:


.boxBg{
margin : 0 auto;
width:500px;
height:200px;
border:2px solid #ccc

}

.box1{

width:100px;

height:50px; background-color:red }

.box2{

largeur:100px;
hauteur:50px;
couleur d'arrière-plan:bleu
}
.box3{
largeur:100px;
hauteur:50px;
couleur d'arrière-plan :green
}


Résultat de l'exécution :




Puisque p est un élément de niveau bloc, les cases seront disposées verticalement. En fonctionnement réel, il est souvent nécessaire de disposer les cadres horizontalement. Il existe deux façons de procéder. Le premier est display:inlin-block;


Copier le code
Le code est le suivant :

.boxBg{

margin : 0 auto;

largeur:500px;

hauteur:200px; border:2px solid #ccc

}

.box1{

largeur:100px;

hauteur:50px; arrière-plan -color :red; display:inline-block

}

.box2{
width:100px;
height:50px;
background-color:blue;
display :inline -block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}


Résultat de l'exécution :




Quant à l'écart au milieu, la raison essentielle remonte à l'espace blanc entre les éléments, alors réglez-le - sur la taille de l'élément parent, vous pouvez ajuster la taille de l'espace vide.


Copier le code
Le code est le suivant :

.boxBg{

margin: 0 auto;

width:500px;

height:200px ; border:2px solid #ccc;

font-size:34px;

}

Après avoir changé font-size:34px, l'écart deviendra plus large.

Résultat de l'exécution :

De même, pour supprimer l'espace, vous devez copier font-size:0;


Code
Le code est le suivant :

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}

Résultat de l'exécution :

De cette façon, la mise en page souhaitée est obtenue et le texte dans la zone disparaît également. Montrer que la taille du texte affecte l'espace. Réinitialisez-le simplement dans l’élément enfant. Bien sûr, ce n’est pas le sujet aujourd’hui. Le même effet float:left; peut également être facilement obtenu.

Copier le code Le code est le suivant :

Résultat de l'exécution :

Une fois float ajouté à l'élément, l'élément flottant frappera la bordure de l'élément parent ou une autre bordure d'élément flottant, immédiatement à côté, affiché plus tard. Par exemple, dans l'exemple suivant, lorsque la largeur totale de l'élément flottant est supérieure à celle de l'élément parent, la ligne est renvoyée à la ligne. Lorsque la ligne est renvoyée à la ligne, le flottant précédent est rencontré et affiché après

<.> Copier le code Le code est le suivant :

Résultat de l'exécution :

Quel sera le résultat si inline-block est utilisé ?

Copier le code Le code est le suivant :

Exécution résultat :

Problème très courant, dans des circonstances normales. Le fond gris devrait être aussi haut que le cadre, mais la réalité n'est toujours pas satisfaisante :)

La raison de cette situation est connue pour être causée par le flottement. Oui, il flotte à de nombreux endroits. a dit que les éléments flottants se détacheront du flux ordinaire, donc les éléments ordinaires peuvent être traités comme des éléments flottants qui n'existent pas, donc l'arrière-plan ne sera pas ouvert ici. Mais les étudiants qui lisent attentivement se souviendront qu'il est mentionné ci-dessus que les éléments flottants. n'affectera pas le cadre de bloc. Mais cela affectera le cadre de ligne, c'est-à-dire le texte ou les éléments en ligne. Qu'il s'agisse d'un élément de niveau bloc ou d'un élément en ligne, il appartient au flux ordinaire. le flux ordinaire, pourquoi cela affectera-t-il le cadre de la ligne ? En fait, je ne pense pas qu’il soit nécessaire de s’attarder sur ces choses conceptuelles. D'après ma compréhension, les éléments flottants ne sont pas dans le même espace horizontal que les éléments au niveau du bloc, mais dans le même espace que les éléments de texte en ligne, donc la bordure ici équivaut à être au-dessus de l'arrière-plan, donc elle n'affectera pas le Éléments d'arrière-plan. Ce qu'on appelle habituellement effacer les flotteurs. Cela ne signifie pas supprimer l'attribut float de l'élément flottant, mais effacer les éléments flottants autour de lui afin qu'il n'y ait pas d'éléments flottants autour de lui. Par conséquent, si vous souhaitez déplacer la boîte. 3 à la deuxième ligne, vous ne pouvez pas utiliser clear:right; dans la case 2. Vous devez utiliser clear:left;

copier le code dans la case 3. Le code est le suivant :

.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left
}

Résultat de l'exécution :

ok Après avoir compris cela, parlons de la façon de faire en sorte que l'arrière-plan et le cadre aient la même hauteur. méthode : la méthode la plus directe est de définir directement la hauteur de l'arrière-plan pour qu'elle soit égale au cadre et tout ira bien. Bien sûr, ce n'est pas le sujet. Parlons d'effacer le flottant. Tout d'abord, regardons l'exemple :

Copier le code Le code est le suivant :

< html>