display:table と display:block の使用法の違い

clearfix が通常次のように書かれていることは誰もが知っています:

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

しかし、なぜ display: table を使用するのでしょうか? display:block を使用すると、表示は正常に表示され、float がクリアされるようです。

以前この質問を検索したことがありますが、説明がわかりにくいか、私のレベルが低すぎると感じました。とにかく、彼らが何を表現したいのか理解できず、具体例も示されていません。前に、結果を見てみましょう:

CodePen の wenjie (@wenjie) による Pen Clearfix を参照してください。

親コンテナーを BFC 形式にする方法とマージンを防ぐ方法について、インターネット上でたくさんの議論があります。崩壊。でも、例をあげないと、何をやっても潰れません。 私が最初にテストしたのは、ブロックです。マージンは正常で、崩れていませんでした。 後で、マージンを折りたたむには、ラベルが浮いていないラベル上にある必要があることがわかりました。したがって、display:table はこの問題を解決します。

両方が浮いている場合、どのように測定しても崩壊は発生しません。テーブルの代わりにブロックを使用すると何が問題になりますか?

そして、なぜ「前」と書く必要があるのでしょうか？外すときも同様にフロートを外しますとマージントップの崩れも防止できます。浮きラベルがない場合でも測定可能です。

実は私は崩壊という言葉に疑問を持っています。潰れておらず、マージンがまだ存在しており、外側の容器のマージンにすぎません。 崩れないということは存在しない、もしくは小さくなるということでしょうか？

最新のブラウザ (テストには FF54 を使用しました) では、 display: flow-root; を直接使用して浮動小数点数をクリアできます。その効果は、使用する display:table と同じです。

以上がdisplay:table と display:block の使用法の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。