css float ne s'enroule pas

Dans le processus de création de pages Web, nous utilisons souvent l'attribut float de CSS pour organiser plusieurs éléments dans la même ligne ou colonne. Mais parfois, les éléments flottants sont affectés à la ligne suivante. À ce stade, nous devons maîtriser certaines compétences pour empêcher les éléments flottants de s'enrouler.

1. Effacer les flotteurs

Si la largeur n'est pas définie, l'élément flottant occupera la largeur de l'élément parent par défaut. Si la hauteur de l'élément parent n'est pas suffisante, l'élément flottant sera "pressé" sur la ligne suivante. Alors comment résoudre ce problème ? Vous pouvez utiliser la technique du flotteur clair. Les méthodes courantes d'effacement des flottants sont les suivantes :

1. Utilisez clearfix

pour ajouter la classe "clearfix" au style CSS de l'élément parent, comme indiqué ci-dessous :

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

En HTML, ajoutez le nom de classe "clearfix" à l'élément parent, comme indiqué ci-dessous :

<div class="clearfix">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. Utilisez des pseudo-classes pour effacer les flottants

Ajoutez la pseudo-classe ":before" ou ":after" dans le style CSS de l'élément parent, comme indiqué ci-dessous :

.parent:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

En HTML, donnez l'élément parent. Ajoutez le nom de classe "parent" comme indiqué ci-dessous :

<div class="parent">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. Utilisez display: inline-block

En plus d'effacer les flottants pour empêcher les éléments flottants de s'enrouler, vous pouvez également utiliser le Attribut "display: inline-block". Cet attribut permet à l'élément d'avoir les caractéristiques d'un élément de niveau bloc en ligne. La hauteur peut être définie tout en conservant le même affichage de ligne.

<div style="display: inline-block;">Inline-block</div>
<div style="display: inline-block;">Inline-block</div>

3. Utiliser le paramètre de largeur

Si l'élément flottant a une largeur définie, il sera affiché sur la même ligne même si l'élément parent n'est pas assez grand.

<div style="width: 50%; float: left;">Left Float</div>
<div style="width: 50%; float: left;">Right Float</div>

4. Utiliser la mise en page élastique

La mise en page flexible est une méthode de mise en page fournie par CSS3, qui est très pratique lorsque plusieurs éléments sont disposés dans la même ligne ou colonne. Pour utiliser une mise en page flexible, il vous suffit de définir l'attribut "display: flex" sur l'élément parent pour permettre aux éléments enfants d'effectuer une mise en page adaptative.

<div style="display: flex;">
    <div style="flex: 1;">Flex 1</div>
    <div style="flex: 1;">Flex 2</div>
</div>

Il existe plusieurs méthodes ci-dessus pour empêcher les éléments flottants de s'enrouler. Vous pouvez choisir la méthode qui vous convient en fonction de la situation réelle.

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!