clear 属性を持つ要素がフローティング要素の前に書かれている場合、その両側にフローティング要素がないため、この属性は効果がありません

CSS ドキュメントでは、clear:both は次のことを意味します:

ボックスの上マージンの端は、ソースドキュメント内で以前に生成されたフローティングボックスの下マージンの端よりも低くする必要があります。
ボックスの上端の境界線が、ソース ドキュメント内の以前の要素から生じた右フローティング ボックスと左フローティング ボックスの下端の外端よりも下にあることが必要です。

そのため、clear:both 属性を持つ要素をフローティング要素の後に配置して、フロートを閉じることができます。
通常、float 要素の親要素の疑似要素を通じて float をクリアします。あなたの場合は

after 疑似要素は親要素の最後の子要素であるため、このブロック内のフロートをクリアできます。

まずはフロートの影響とクリアの役割を理解しましょう。さらにデモを書いて触ってみると、どこに配置すればよいかがわかります。他のドキュメントやその他の Baidu を参照してください

clear:both; 浮動要素の後に書き込む場合は、浮動要素をクリアします。

私の理解について話させてください
clearboth 自体が目的です
したがって、

は、この要素の左右のフロートをクリアすることを意味します。これを前に配置した場合、最後のフロート要素が引き続き影響します。親要素

C で動作する場合、次のように記述されます:clear属性一定要牢记的是：
1） 该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clearリーリー

はこの要素の前の float のみをクリアできるためです。clear"要素のクリアは、ドキュメント順でその前のフロートのみをクリアします。その後のフロートはクリアしません。"