Que faut-il faire lorsque l'attribut float provoque un saut de ligne ?

La mise en page est indissociable de l'utilisation de flottants. Que faire lorsque l'attribut float provoque des sauts de ligne ? Amis qui veulent savoir, continuez à lire ci-dessous, j'espère que cela pourra vous aider.

Dans le développement h5, les attributs float sont souvent utilisés pour résoudre certains problèmes de mise en page. Cependant, dans certaines mises en page complexes, vous pouvez également rencontrer des phénomènes tels que l'utilisation de l'attribut float, qui empêche les éléments d'une rangée de s'aligner ou de se retourner à la ligne. Lorsque nous rencontrons ce genre de problème, nous pouvons modifier la position de l'élément pour résoudre le problème de retour à la ligne ou de désalignement des éléments.

<div class="container">
    <a href="address-manager.html">
        <i class="icon-home icon-large"></i>
        <p>修改收货地址</p>
        <i class="icon-angle-right icon-2x"></i>
    </a>
</div>

Par exemple, lorsque j'écrivais une mise en page de type menu, ce phénomène s'est produit dans la colonne "Modifier l'adresse" lorsque j'ai déplacé l'élément que je voulais faire flotter vers la droite (la flèche droite). ) L'ajustement de la position du premier élément dans le code résout le problème du retour à la ligne flottant.

Étant donné que chaque navigateur présente des différences de style, il existe une autre situation dans laquelle l'élément qui flotte vers la droite aura un problème de saut de ligne lorsque la largeur n'est pas suffisante. Dans ce cas, cela peut être résolu simplement. en modifiant la largeur.

Ce qui suit est un résumé des caractéristiques liées à l'attribut float apprises lors du processus de recherche d'informations :

float est un attribut de positionnement flottant en CSS

Caractéristiques :

1. La boîte flottante peut flotter à gauche et à droite jusqu'à ce que son bord extérieur rencontre la boîte contenant ou une autre boîte flottante

2. le flux normal du document ignorera le flottant.L'existence de la boîte

3. La boîte flottante n'affectera pas la disposition de la boîte au niveau du bloc, mais affectera la disposition de la boîte en ligne ; 🎜>

4. Lorsque la hauteur de la boîte flottante dépasse la boîte conteneur (c'est-à-dire la disposition parent), la boîte conteneur n'étire pas automatiquement sa hauteur si la boîte conteneur n'inclut pas d'autres flux ordinaires, la hauteur. de la boîte contenante sera 0, ce qu'on appelle le phénomène d'effondrement en hauteur.

La situation ci-dessus est en fait une manifestation de la boîte flottante affectant la boîte en ligne.

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!