Quels sont les points auxquels vous devez faire attention lorsque vous faites flotter des éléments CSS ?

Remarques : 1. La limite extérieure gauche d'un élément flottant ne peut pas dépasser la limite intérieure gauche de son bloc contenant, et il en va de même pour la limite extérieure droite. 2. Le sommet d'un élément flottant ne peut pas être plus haut que le sommet intérieur ; de son élément parent ; 3. Flottant Le haut de l'élément ne peut pas être plus haut que le haut de l'élément précédemment flottant ou de l'élément de niveau bloc ; 4. L'élément flottant à gauche doit être aussi loin que possible vers la gauche, celui de droite ; l'élément flottant doit être le plus à droite possible, etc.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Float en CSS :

Afin de déplacer un élément vers la gauche ou la droite de l'élément parent en CSS, nous pouvons définir un flottant sur l'élément.

float:left/right

Sélection flottante Il existe deux types, l'un est float:left. Il y a aussi float:right right float

Si float est défini sur un élément, alors l'élément se détachera du flux de document standard, et l'élément derrière l'élément occupera la position d'origine de l'élément, et le contenu derrière l'élément l'élément sera Extruder.

L'élément avec float ajouté n'a ni largeur ni hauteur, et la hauteur de l'élément parent de l'élément sera également affichée, c'est-à-dire que la hauteur s'effondre la largeur et la hauteur de l'élément avec float ajouté doivent changer dynamiquement en fonction. au contenu à l’intérieur de l’élément. Pour réinitialiser la hauteur de son élément parent.

Si le flottement laissé est défini pour certains éléments, alors ces éléments seront affichés dans la même ligne, mais si la somme des largeurs de ces éléments est supérieure à l'élément parent, la partie excédentaire (y compris l'élément) sera affiché sur la ligne suivante.

Règles que les éléments flottants doivent suivre (notes)

• La limite extérieure gauche d'un élément flottant ne peut pas dépasser la limite intérieure gauche de son bloc conteneur, et il en va de même pour la droite

• Empêcher les éléments de se recouvrir et de flotter Les limites extérieures gauche (ou droite) d'un élément doivent être les limites extérieures droite (ou gauche) de l'élément flottant à gauche (flotté à droite) précédent dans le document source, à moins que le haut de l'élément flottant ultérieurement se trouve en dessous du bas de l'élément flottant précédemment.
  

• Le bord extérieur gauche d'un élément flottant doit être le bord extérieur droit de l'élément flottant gauche qui apparaît précédemment dans le fichier source, à moins que le haut de l'élément flottant suivant ne soit en dessous du bas de l'élément flottant précédent.

• La bordure extérieure droite d'un élément flottant à gauche n'apparaîtra pas à droite de la bordure extérieure gauche d'un élément flottant à droite à sa droite.

• Le haut d'un élément flottant ne peut pas être plus haut que le haut intérieur de son élément parent

• Le haut d'un élément flottant ne peut pas être plus haut que le haut de tous les éléments flottants ou éléments de niveau bloc précédents

• S'il y a un élément flottant, un élément flottant ne peut pas être précédé d'un autre élément, et le haut de l'élément flottant ne peut pas être plus haut que le haut de toute boîte de ligne contenant la boîte générée par l'élément.

• Les éléments flottants ne peuvent pas dépasser les limites des éléments qui les contiennent. L'élément flottant gauche (ou droit) a un autre élément flottant à gauche (ou à droite), et la limite extérieure droite du premier ne peut pas être à droite (ou à gauche) de la limite droite (ou gauche) de son bloc conteneur. S'il n'y a pas assez d'espace, l'élément flottant sera pressé sur une nouvelle "rangée"

• Les éléments flottants doivent être placés le plus haut possible. Autrement dit, sous réserve de satisfaire d'autres contraintes, flottez aussi haut que possible.

• L'élément flottant de gauche doit être le plus à gauche possible, et l'élément flottant de droite doit être le plus à droite possible

Règles de tri flottantes

• Éléments flottants dans la même direction sera affichée en premier. Parce que le flottement ne couvrira que le flux standard

• Flottant vers la gauche pour trouver le flottant de gauche, flottez vers la droite pour trouver le flottant de droite

• La position. de l'élément flottant après flottement est déterminé par la norme avant flottement de l'élément flottant. Déterminé par la position dans le flux

• Phénomène d'emballage : Si le dernier élément flottant dépasse la largeur de l'élément parent, il sera automatiquement trouvé. l'élément suivant pour s'y tenir. Si la largeur n'est toujours pas suffisante, continuez à trouver le précédent ~ Si l'élément parent Si la largeur n'est toujours pas suffisante, alors vous ne pouvez vous contenter que de lui

• Graphiques mixtes et text

Clear float

• Définissez la hauteur de l'élément parent précédent (il est préférable de ne pas le définir pendant la hauteur de développement, cette commodité n'est donc pas recommandée)

• Définissez l'attribut clear pour les éléments suivants (notez que l'attribut margin deviendra invalide après l'ajout de l'attribut clear)

• Méthode de cloison de séparation

  • Méthode de mur extérieur

    Milieu Ajoutez un élément de niveau bloc et définissez clear : les deux (Remarque : Vous pouvez utiliser margin-top dans la deuxième case, mais vous ne pouvez pas utiliser margin-bottom dans la première case, donc généralement, ne définissez pas la marge inférieure de la première case, ni ne définissez pas la marge supérieure de la deuxième case, mais définissez directement la hauteur de l'élément supplémentaire au niveau du bloc)

  • Méthode du mur intérieur

    Écrivez l'élément au niveau du bloc à la fin de la première boîte et définissez clairement : les deux (Remarque : la première boîte peut utiliser une marge- bottom, et la deuxième boîte peut également utiliser margin-top (des éléments supplémentaires au niveau du bloc peuvent également définir la hauteur)

    .

  • Différence : la méthode du mur intérieur peut supporter la hauteur de la première boîte, mais la méthode du mur extérieur ne le peut pas (la méthode modifiée n'est pas non plus recommandée car des éléments supplémentaires sont ajoutés)

Utilisez des pseudo-éléments (recommandé). utilisation)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow : caché(Utilisation recommandée)

.box1{
    *zoom: 1;   // 兼容IE6
}

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!