1行でfloatの回り込みを解除 display flow-root;

MARKLEAPS

2023.11.08

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

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

・html

<div class="parent clearfix">
    <div class="float_l">
        回り込みさせる要素
    </div>
    <div class="float_l">
        回り込みさせる要素
    </div>
</div>

回り込みさせる要素

</div>

回り込みさせる要素

</div>

・css

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.clearfix::after {

content: "";

display: block;

clear: both;

}

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

・html

<div class="parent">
    <div class="float_l">
        回り込みさせる要素
    </div>
    <div class="float_l">
        回り込みさせる要素
    </div>
</div>

回り込みさせる要素

</div>

回り込みさせる要素

</div>

・css

.parent {
	display: flow-root;
}

.parent {

display: flow-root;

}

CSS

よく読まれている関連記事