Explication détaillée des flotteurs en CSS et trois méthodes d'effacement des flotteurs

Avant de parler de float, parlons de deux phénomènes particuliers de margin attribut en CSS

1, en dehors de The phénomène de fusion de distance  :

Si deux p sont triés de haut en bas, définissez margin-bottom pour le p supérieur et définissez margin-top pour le inférieur à p , alors les deux marges seront fusionnées et celle avec la plus grande valeur après la fusion se produira.

Il n'est généralement pas nécessaire de s'attaquer à ce phénomène.

2. Phénomène d'effondrement des marges :

Si une grande boîte contient une petite boîte et que la marge supérieure est définie pour la petite boîte, la grande boîte se déplacera ensemble vers le bas.

Solution :

1.0 Ajouter un attribut border border à la grande boîte.

2.0 définit un attribut overflow pour la grande boîte.

3.0 utilise des flotteurs.

Supplément : Les attributs de débordement couramment utilisés sont les suivants :

visible

visible	：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：	内容会被修剪，并且其余内容是不可见的。
Scroll：	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 : valeur par défaut. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.

Caché：

Le contenu sera coupé et le contenu restant sera invisible .

Défilement：

Le contenu sera coupé, mais le navigateur affichera un défilement bars pour voir le reste.

Auto：

Si le contenu est coupé, le navigateur le fera Affiche des barres de défilement pour afficher le reste du contenu.

Flottant

Le flottant est un point important en CSS Pourquoi utiliser le flottant ?

consiste à résoudre le problème de l'affichage de plusieurs cases sur une seule ligne.

flotteur : gauche ; flotteur : droite

Le flotteur a trois caractéristiques :

1, hors du débit standard , pas Prendre position.

2 changera le mode d'affichage par défaut de l'élément affichage en élément de niveau bloc.

3. Les éléments flottants couvriront uniquement les éléments de niveau bloc suivants et n'affecteront pas les éléments de niveau bloc précédents.

Qu'est-ce que le flux standard ?

est la norme par défaut du navigateur pour placer des boîtes.

Caractéristiques du flux standard :

1. Les éléments au niveau du bloc occupent une ligne de haut en bas.

2, les éléments en ligne, les éléments au niveau du bloc en ligne sont affichés sur une ligne de gauche à droite.

3, occupez le poste.

L'impact du flottement et Trois façons d'effacer le flottement

L'impact du flottement sur la page :

Si un boîte parent Il y a une boîte enfant dans la boîte et la boîte parent n'a pas de hauteur définie. La boîte enfant flotte dans la boîte parent, donc la hauteur de la boîte parent sera de 0 à l'avenir puisque la hauteur du parent. La boîte est 0, les éléments suivants seront automatiquement remplis, il est donc temps d'effacer le flottant.

Effacer : les deux

1, utilisez la méthode d'étiquette supplémentaire :

Mettez une autre étiquette sous la boîte flottante et utilisez-la dans cette étiquette claire : les deux, pour effacer l’impact du flottement sur la page.

.clearfix{

clair : les deux ;

}

< /p>

a. Étiquette interne : rouvrira la hauteur de la boîte parent de cette boîte flottante

b. Étiquette externe : effacera l'influence de cette boîte flottante, mais ne s'étendra pas. il ouvre la boîte parent.

Remarque : Généralement, cette méthode n'est pas utilisée pour effacer les flotteurs. Parce que cette méthode d'effacement des flottants augmentera l'étiquette de la page.

2. Utilisez l'attribut overflow pour effacer le flottant :

Recherchez d'abord l'élément parent de la boîte flottante, puis ajoutez un attribut à l'élément parent à effacer. l'élément parent L'impact des éléments enfants flottants sur la page.

débordement : caché ;

3, utilisez des pseudo-éléments pour effacer les flottants :

.clearfix:after {

contenu : "";//Le contenu ajouté est vide

 hauteur : 0;//La hauteur du contenu est 0

 ligne- height : 0 ;//La hauteur du texte du contenu est de 0

display : block ;//Définir le texte comme un élément de niveau bloc

clear : les deux ;// Effacer le flotteur

                                                                                           zoom : 1 ;/*Pour la compatibilité avec ie 6*/ }

Le contenu

visible
: Valeur par défaut. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.	Masqué  :
sera coupé et le contenu restant sera invisible.
Défilement :	Le contenu est coupé, mais le navigateur affiche des barres de défilement pour afficher le contenu restant.
Auto :	Si le contenu est coupé, le navigateur affiche des barres de défilement pour afficher le contenu restant.

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!