Quels problèmes le CSS flottant provoque-t-il ?

L'impact du CSS flottant : 1. Puisque l'élément flottant est hors du flux de documents, la hauteur de l'élément parent ne peut pas être étendue, ce qui affecte les éléments au même niveau que l'élément parent si la hauteur ; n'est pas défini pour l'élément parent, alors l'élément parent ne sera pas affiché à l'écran. 2. L'élément flottant n'occupe plus la position du flux de documents d'origine et affectera la disposition des éléments suivants.

L'environnement d'exploitation de cet article : système Windows 7, version css3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Nous devons savoir : une boîte flottante peut se déplacer de gauche à droite jusqu'à ce qu'elle rencontre une autre boîte flottante ou une boîte contenante sur son bord extérieur . La boîte flottante n'appartient pas au flux ordinaire du flux de documents. Lorsque l'élément flotte, cela n'affectera pas la disposition des éléments au niveau du bloc, mais affectera uniquement la disposition des éléments en ligne.

A ce moment, le flux normal dans le flux de documents montrera que la boîte flottante n'a pas le même mode de mise en page. Lorsque la hauteur de la boîte contenante est inférieure à celle de la boîte flottante, "Height Collapse" apparaîtra.

Lorsque l'élément parent ne définit pas de hauteur, si l'élément enfant dans l'élément parent est défini sur float, la hauteur de l'élément parent ne sera pas automatiquement développée. Il n'y a pas de valeur de hauteur.

Évidemment, il y a quelques problèmes après avoir réglé le float de cette manière, tels que :

• La marge de l'élément parent est affectée et ne peut pas être centrée vers le haut, vers le bas, gauche et droite,

• Si la hauteur de l'élément parent n'est pas définie et que la hauteur de l'élément parent n'est pas développée après le flottement, alors l'élément parent ne sera pas affiché sur le afficher.

Résumé : Conséquences causées par le flottement

(1) L'élément flottant étant hors du flux de documents, la hauteur de l'élément parent ne peut pas être développé, affectant les éléments au même niveau que l'élément parent ; si la hauteur n'est pas définie pour l'élément parent, l'élément parent ne sera pas affiché à l'écran.

(2) Les éléments non flottants au même niveau que l'élément flottant le suivront, car l'élément flottant quitte le flux documentaire et n'occupe pas sa position d'origine

(3) Si l'élément flottant n'est pas le premier S'il y a un élément flottant, l'élément précédant l'élément doit également être flottant, sinon cela affectera facilement l'affichage structurel de la page

Puisque l'élément flottant n'occupe plus le position du flux de documents d'origine, cela aura un impact sur la disposition des éléments suivants. Afin de résoudre ces problèmes, vous devez effacer le flottant dans l'élément à ce moment-là.

Comment effacer le flottement ? Effacer le processus flottant

1. Définissez d'abord la hauteur CSS du parent pour l'effacer. Généralement, nous définissons une hauteur pour la hauteur, définissons la hauteur du contenu sur 100 px et les cases supérieure et inférieure sur . 2px, de sorte qu'ici, la hauteur totale du parent soit de 102px. Nous utilisons le style height, mais nous devons d’abord calculer la hauteur du contenu.

2. Utilisez l'attribut clear:both pour effacer le flottant. Nous pouvons mettre un style class="clear dans le div pour effacer le flottant.

3. Faites le div parent pour définir. attributs, nous définissons un style overflow:hidden pour le sélecteur CSS parent afin d'effacer le float généré par le parent

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation !

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!