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

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

.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;}

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!