displayプロパティのflow-rootを使えば、clearfixを使うことなく、1行でフロートの回り込みを解除できます。

clearfixでの回り込み解除

これまで、floatを含むコンテンツにはclearfixでコンテンツの高さを保つ処理をしていました。

・html

 

・css

flow-rootでの回り込み解除

floatさせる要素の親要素に対して
display: flow-root;
の一行を入れるだけで回り込みを解除できます。

 

・html

 

・css