floatプロパティを使用した際の回り込み解除について

Question

例えばサイトを作るときに親要素AのなかにB,Cという要素があり、その下にDという要素がある場合、BとCをfloatを使ってAの中で横並びにさせる際（コンテンツとサイドバーを横並びにしたい時など）、

.A:after {
  content: '';
  display: block;
  clear: both;
}

というコードを書くと思います。こうすれば、BとCが浮き上がって高さを失ったAが消滅し、要素Dも回り込みが解除されないままになりレイアウトがごちゃごちゃになる、という事態が避けられると教わってきました。ですが、このとき素人の考えでは、どちらにせよBとCは浮いたままで親要素Aには何も入ってない状態だから、高さを失った親要素Aは消滅するのではないかと思ってしまいました。消滅しないのはなぜなんでしょうか？

Answer 1

.A::afterは.Aの次の要素として::afterを追加するのではなくて、
.Aの中の一番後方に::afterを追加するからかなと。
::afterはcontent''を持ちblock要素※疑似要素だけども、一応.Aの中身に当たる

それに対してclear:both;しているから回り込みが解除されて、
要素Dは.Aの下に配置される…のだと思うのだけども。

以下蛇足です。
もっと詳しい方が参考資料付きで突っ込んでくれるかもしれません。

検索でMDNが引っ掛かったので追記

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

MDNより抜粋

最後の子要素とのことなので、やはり.Aは空っぽにならないということになるかと。

追記
参考URL　MDN　::after (:after)
https://developer.mozilla.org/ja/docs/Web/CSS/::after