【CSS】float後の要素の回りこみ解除させる親要素のプロパティ

2015/10/2

2021/10/5

2095 views

floatの解除

floatで回り込んだ要素は解除しないと引き継いでしまいレイアウトを崩します。
以下のCSSプロパティをfloat要素を囲っているブロック要素に記述すれば後の要素の回りこみ解除させることができます。

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

以下はhtmlの記述例です。
floatさせた要素を囲んだ要素に適用させます。

<div class="clearfix">
<div class="float">float要素</div>
<div class="float">float要素</div>
</div>

以上です。
ご質問などあればお気軽にコメントください。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



このサイトの表示速度はどうですか?

当サイトはレンタルサーバーにConoHa WING(コノハウイング)を使っていますよ。

ページの先頭に戻る