简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Clearing floats (méthode de compensation des flotteurs) créés par un échange Foreigner_Experience

WBOY
Libérer： 2016-05-16 12:07:31
original
1629 Les gens l'ont consulté

Ce que j'utilise couramment, ce sont les méthodes clear:both;, telles que



>

J'ai vu une autre méthode comme celle-ci sur PlanABC, donc je en a pris note.
div.container {
border: 1px solid #000000;
}

div.left {
width: 45%
float: left; 🎜>}

div.right {
width: 45%;
float: right
}


Relation imbriquée : le conteneur div contient left et right

La manière la plus simple et la plus raisonnable d'effacer les flottants (partie rouge en gras) :

div.container {
border: 1px solid #000000
overflow: Hidden; 🎜> largeur : 100% ;
}

Compatibilité : IE6 IE7 FF MacIE, etc.

Adresse source : http://www.quirksmode.org/css/clearing.html

PS : Cependant, il semble y avoir un petit bug dans le processus d'utilisation. Xiaomi de Taobao l'a rencontré. Le symptôme spécifique est que la couche intermédiaire d'IE6 efface les divs flottants, ce qui rend certains liens non cliquables.
Étiquettes associées：
一个老外弄的Clearing floats(清除浮动的方法)
source：php.cn
Article précédent：Utilisation des balises dl, dt, dd pour obtenir un code d'effet de rotation de page sous l'échange XHTML_Experience Article suivant：Résumé des avantages de l'utilisation de CSS+DIV pour l'échange layout_Experience
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
Depuis 2024-04-06 20:05:30
0
1
544
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Regrouper les utilisateurs (nombre total d'utilisateurs, utilisateurs administrateurs, opérateurs de contrôle, gardes) à l'aide de requêtes éloquentes J'ai une requête qui compte tous les utilisateurs, le nombre total d'utilisateurs avec le ...
Depuis 2024-04-05 12:11:26
0
1
332
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！