Maison > interface Web > tutoriel HTML > le corps du texte

Différences d'utilisation de display:table et display:block

巴扎黑
Libérer: 2017-07-17 15:09:40
original
4976 Les gens l'ont consulté

Nous savons tous que clearfix s'écrit généralement comme ceci :

.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;}
Copier après la connexion

Mais pourquoi utiliser display: table ? Lorsque j'utilise display:block, l'affichage semble normal et les flotteurs peuvent être effacés.

J'ai déjà cherché cette question et j'ai l'impression que l'explication est confuse ou que mon niveau est trop bas. De toute façon, je ne comprends pas ce qu'ils veulent exprimer et ils ne donnent pas d'exemples. D'accord, c'est absurde. Sans plus tarder, jetons un œil aux résultats :

Voir le Pen Clearfix de wenjie (@wenjie) sur CodePen.

Il y a beaucoup de discussions sur Internet à propos de ce qui fait que le conteneur parent forme un BFC et ce qui empêche l'effondrement des marges. Mais si je ne donne pas d’exemples, je ne m’effondrerai pas, quoi que je fasse. J'ai initialement testé la pièce bleue L'avez-vous vu ? J'ai utilisé : bloc La marge est normale et ne s'est pas effondrée ? Plus tard, j'ai découvert que la marge doit en fait figurer sur une étiquette qui ne flotte pas pour qu'elle s'effondre. Donc display:table sert à résoudre ce problème.

Lorsque les deux flottent, l'effondrement ne se produira pas. Quelle que soit la façon dont vous testez, vous ne pourrez pas détecter le problème de l'utilisation d'un bloc au lieu d'une table.

Pourquoi devrais-je écrire : avant ? Lorsque je le retire, j'efface également le flotteur normalement. De la même manière, cela empêche également la marge supérieure de s'effondrer. Il peut également être mesuré lorsqu'il n'y a pas d'étiquettes flottantes.

En fait, j'ai des doutes sur le mot effondrement. Il ne s'est pas effondré, sa marge existe toujours, ce n'est qu'une marge pour le contenant extérieur. L’effondrement ne signifie-t-il pas qu’il n’existe pas ou qu’il devient plus petit ?

Dans le dernier navigateur (j'ai utilisé FF54 pour les tests), vous pouvez utiliser directement display: flow-root; pour effacer les flottants. L'effet est le même que celui display:table que nous utilisons. .

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
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!