flotter clair html

Dans le développement Web, des problèmes de mise en page causés par des éléments flottants sont souvent rencontrés. Les éléments flottants se détacheront du flux de documents, provoquant l'effondrement de la hauteur de l'élément parent et l'affectation des autres éléments frères. Pour résoudre ces problèmes, nous devons utiliser la compensation flottante.

L'essence de la suppression des flotteurs est de laisser l'élément parent contenir l'élément flottant et de recalculer sa propre hauteur. Les méthodes de compensation flottantes courantes sont les suivantes.

1. Utilisez une balise div vide pour effacer les flotteurs

Cette méthode est la méthode de suppression des flotteurs la plus ancienne et la plus courante. Ajoutez une balise div vide à la fin de l'élément flottant et définissez son style sur clear:both pour effacer le flottant.

.clearfix{
    clear:both;
}

En ajoutant un nom de classe clearfix à l'élément parent, il contient l'élément flottant, obligeant ainsi l'élément parent à recalculer la hauteur.

Cependant, cette méthode présente les inconvénients suivants :

• Elle ajoutera des éléments DOM dénués de sens
• Besoin d'ajouter des styles supplémentaires
• Cela peut détruire la mise en page originale

Par conséquent, essayez d'utiliser cette méthode le moins possible, à moins qu'il n'y ait pas de meilleures alternatives.

2. Utilisation de BFC

BFC (contexte de formatage au niveau du bloc) est un concept de mise en page important sur le Web. BFC peut envelopper un élément dans un bloc de mise en page indépendant avec les caractéristiques suivantes :

• Les Box internes seront placées les unes après les autres dans le sens vertical.
• La distance verticale de la Box est déterminée par la marge. Les marges de deux cases adjacentes appartenant au même BFC se chevaucheront.
• La zone BFC ne chevauchera pas la boîte flottante.
• BFC est un conteneur indépendant sur la page. Les éléments externes n'affecteront pas la Box à l'intérieur, et vice versa.
• Lors du calcul de la hauteur BFC, les éléments flottants participent également au calcul.

En définissant BFC sur l'élément parent, le flotteur de l'élément enfant peut être effacé.

Méthode 1 :

.container{
    overflow: hidden;
}

Méthode 2 :

.container{
    display: flow-root;
}

Bien que cette méthode ne nécessite pas l'ajout d'éléments DOM supplémentaires, elle nécessite une certaine compréhension des caractéristiques de BFC et de l'impact de BFC sur la mise en page.

3. Utilisez des pseudo-éléments pour effacer les flotteurs

Obtenez l'effet de suppression des flotteurs en ajoutant un pseudo-élément après l'élément flottant. La méthode d'implémentation spécifique est la suivante :

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

En ajoutant le nom de la classe clearfix à l'élément parent, le float peut être effacé.

Bien que cette méthode nécessite l'ajout de styles supplémentaires, elle n'ajoutera pas d'éléments DOM dénués de sens et n'affectera pas la mise en page.

4. Utiliser la mise en page flexible

La mise en page flexible est une nouvelle méthode de mise en page en CSS3. L'utilisation de la mise en page flexible peut facilement résoudre certains problèmes de mise en page, tels que le centrage horizontal, le centrage vertical, etc.

Les flotteurs peuvent également être effacés à l'aide de la disposition flex. La méthode d'implémentation spécifique est la suivante :

.container{
    display: flex;
    flex-wrap: wrap;
}

En définissant l'élément parent comme conteneur flex, les éléments enfants deviendront automatiquement des éléments flex et le retour à la ligne peut être contrôlé via le flex. Attribut -wrap. En raison des caractéristiques de la disposition flexible, l'élément parent contiendra tous les éléments enfants et recalculera sa propre hauteur, obtenant ainsi l'effet d'effacement des flotteurs.

Cependant, il convient de noter que l'utilisation de la mise en page flexible peut détruire la mise en page originale, elle doit donc être ajustée en fonction des besoins réels.

Résumé

Ce qui précède présente les méthodes de compensation flottantes courantes. Chaque méthode a ses avantages et ses inconvénients. Choisissez la solution la plus adaptée en fonction de vos besoins réels. Mais quelle que soit la méthode utilisée, vous devez veiller à nettoyer les flotteurs sans détruire la disposition d'origine.

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!