Comment gérer les sauts de ligne provoqués par les attributs float en HTML5

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. Lorsqu'on rencontre ce genre de problème, on peut modifier la position de l'élément pour résoudre le problème de retour à la ligne ou de désalignement des éléments.

<p 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>
</p>

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 vers lequel je voulais flotter. vers la droite, (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 également une situation dans laquelle des problèmes de retour à la ligne se produiront lorsque la largeur de l'élément flottant vers la droite n'est pas suffisante. Dans ce cas, cela peut être résolu en modifiant simplement 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 :
(1) 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. La boîte flottante est hors du flux normal du document, et le flux normal du document ignorera l'existence de la boîte flottante
 ; 3. Les boîtes flottantes n'affecteront pas la disposition des boîtes au niveau du bloc, mais affecteront la disposition des boîtes en ligne
 ; 4. Lorsque la hauteur de la boîte flottante dépasse la hauteur de la boîte conteneur (c'est-à-dire la mise en page parent), la boîte conteneur n'étendra pas automatiquement sa hauteur. Si la boîte conteneur n'inclut pas d'autres flux ordinaires, la hauteur du. 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!