floatの回り込み解除をCSSだけで実現する


cssのfloat属性は、挙動がわかりにくくていつも苦労します……

float:leftを要素に指定すると、以降の要素が右側に回りこむようになります。(※)
それを解除し、また下から要素を続けたい場合は、clear:leftを指定した要素を挿入します。
例えば、下記のように空のdivを用意するわけです。
(※厳密に言うと、この解釈は間違いみたいです。

この時、わざわざ空のdivを用意したり、次の要素にclearを指定しなくても、
CSSのafter擬似要素を用いることでも、回りこみを解除できます。

:after擬似要素を使うと、要素の後に別の要素を付け加えることができるそうです。
CSSってそんなことまでできるんですね。

参考:CSS の after 擬似要素で回り込みを解除する