cssの回り込み解除

ChatGPTに教えていただきました。

cssを書いているとブロックAとブロックBで、ブロックAで書いた回り込みを解除するのにclear:bothを次のブロック前に書きたく無いなぁと思ったりもするのですが、ChatGPTが書き方を教えてくれました。

.contentA {コンテンツAのcss} 
.contentA::after {
  content: "";
  display: block;
  clear: both;
  float: none;
}
.contentB {コンテンツBのcss} 

.contentA内のフロートされた要素の後に空のブロックを挿入し、そのブロックにclear: both;を適用して、フロートをクリアするという方法だそうです。
次のブロックに影響を与えないようcssを断ち切るのには良い方法です。

あまり、cssを書かないのでたまに小ネタを教えてもらうと面白いですね。
この書き方は、一般的なのでしょうか。


この記事が気に入ったらサポートをしてみませんか?