Unterschiede in der Verwendung von display:table und display:block

Wir alle wissen, dass Clearfix normalerweise so geschrieben wird:

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

Aber warum display:table verwenden? Wenn ich display:block verwende, scheint die Anzeige normal zu sein und die Floats können gelöscht werden.

Ich habe schon einmal nach dieser Frage gesucht und finde, dass die Erklärung verwirrend ist oder mein Niveau zu niedrig ist. Ich kann jedenfalls nicht verstehen, was sie ausdrücken wollen, und sie geben keine Beispiele. Okay, Unsinn. Werfen wir ohne weitere Umschweife einen Blick auf die Ergebnisse:

Sehen Sie sich den Pen Clearfix von wenjie (@wenjie) auf CodePen an.

Im Internet wird viel darüber gesprochen Was bewirkt, dass der übergeordnete Container einen BFC bildet und was verhindert, dass der Rand zusammenbricht? Aber wenn ich Ihnen keine Beispiele gebe, werde ich nicht zusammenbrechen, egal was ich tue. Ich habe das blaue Stück ursprünglich getestet. Ich habe es verwendet: Der Rand ist normal und nicht zusammengebrochen. Später entdeckte ich, dass sich der Rand tatsächlich auf einem nicht schwebenden Etikett befinden muss, damit es zusammenbricht. display:table soll dieses Problem lösen.

Wenn beide schwebend sind, kommt es nicht zu einem Kollaps, egal wie Sie testen, Sie werden das Problem der Verwendung von Block anstelle von Tabelle nicht erkennen können.

Warum sollte ich sonst schreiben: vorher? Wenn ich es entferne, wird auch der Schwimmer normal gelöscht. Auf die gleiche Weise wird auch verhindert, dass der Rand oben zusammenfällt. Es kann auch gemessen werden, wenn keine schwebenden Etiketten vorhanden sind.

Eigentlich habe ich Zweifel an dem Wort Zusammenbruch. Es ist nicht zusammengebrochen, sein Rand existiert noch, es ist nur ein Rand für den äußeren Container. Bedeutet Kollaps nicht, dass es nicht existiert oder kleiner wird?

Im neuesten Browser (ich habe FF54 zum Testen verwendet) können Sie display: flow-root; direkt verwenden, um Floats zu löschen. Der Effekt ist der gleiche wie der von uns verwendete display:table .

Das obige ist der detaillierte Inhalt vonUnterschiede in der Verwendung von display:table und display:block. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!