Introduction détaillée aux connaissances de base CSS float

J'ai écrit un article sur la position des connaissances de base en CSS il y a quelque temps, ma compréhension de float n'était pas très précise, ce qui a été souligné par de nombreux lecteurs sur MOOC.com (l'article original a été corrigé, et je m'excuse si c'était trompeur). Je vais maintenant en apprendre davantage sur float et partager mon expérience d'apprentissage avec vous.

Connaissance de base du flottant

Floating a 4 attributs : gauche (flottant à gauche), droite (flottant à droite), aucun ( non flottant), hériter (hérité).

Le bloc conteneur d'un élément flottant est son ancêtre au niveau du bloc le plus proche.

L'élément flottant sera décalé vers la gauche (ou la droite) jusqu'à ce que son bord extérieur touche le bord intérieur du bloc conteneur ou le bord extérieur d'un autre élément flottant.

L'élément flottant est hors du flux de document standard. Les éléments de texte et de niveau ligne s'enrouleront autour de l'élément, mais les éléments de niveau bloc ne seront pas affectés.

Flottant un élément non-remplacement, une largeur doit être déclarée pour l'élément, sinon la largeur de l'élément tend vers 0.

La marge (marge) d'un élément flottant ne sera pas fusionnée avec la marge des autres éléments.

Une étude approfondie des flotteurs

Le bord supérieur d'un élément flottant ne peut pas être supérieur à l'élément contenant. Le haut de l'élément de niveau bloc ou de l'élément de niveau ligne précédemment généré dans le bloc.

Les éléments flottants ne peuvent pas se chevaucher. S'il n'y a pas assez d'espace pour placer l'élément flottant dans la direction horizontale, il se déplacera vers le bas jusqu'à ce qu'il y ait suffisamment d'espace ou qu'il n'y ait plus d'éléments flottants.

Les éléments flottants ne peuvent pas dépasser les limites gauche, droite et supérieure du bloc conteneur, mais ne peuvent dépasser que la limite inférieure. (Lorsqu'un élément flottant dépasse la limite inférieure, certains navigateurs augmentent la hauteur du bloc conteneur afin que l'élément flottant puisse être inclus dans le bloc conteneur, ce qui entraîne un grand espace vide, provoquant des problèmes de compatibilité du navigateur.)

Paramètres négatifs pour les éléments flottants Lors de l'utilisation de marges, bien que l'élément flottant semble déborder du bloc conteneur, il ne viole pas réellement les règles ci-dessus.

Cas particulier, lorsque l'élément flottant est plus large que le bloc contenant, l'élément flottant débordera dans le sens opposé du décalage.

Les effets négatifs du flottement

L'arrière-plan ne peut pas être affiché

La bordure ne peut pas être ouverte

Le remplissage de la marge ne peut pas être affiché correctement

Comment effacer le flotteur

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

Les bases CSS ci-dessus L'explication détaillée des connaissances sur float est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

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!