問題 × 解決策

あなたはどっちを選ぶ? floatを解除する「Clearfix」の2つのやり方

問題

Floatを解除するには、どうすればいい?

解決策

  • 親要素の疑似要素「after」で「clear: both;」を使用する。
  • 親要素に「overflow: hidden;」を使用する。

 

はじめに

floatとは、要素を回り込ませることの出来る機能のことで、clearfixとは、そのfloatを解除するテクニックのことを指します。このテクニックにおいて有名な方法を2つ、ご紹介します。

まず、マークアップを行います。

覆っている親要素にクラス「clearfix」を設定します。
今回は左側に要素を流し込みます。

<div class=“clearfix”>
<p class=“left-box”>float: left;<br>width: 150px;</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>

次にcssを設定していきます。

① 親要素の疑似要素「after」で「clear: both;」を使用する。

クラス「clearfix」の疑似要素「after」に設定をしていきます。
まず「content」を空欄で設定し、「clear: both;」を設定します。
「after」はその要素の最後の子要素の最後として配置されます。そこでclearすることにより、この要素内でfloatが完結します。
しかし、もしこの要素内でさらにfloatを適用させている状態の場合、意図しない表示となってしまう場合があります。

.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
}
.left-box{
float: left;
width: 130px;
height: 130px;
padding: 10px;
margin-right: 10px;
background-color: #dddddd;
}

② 親要素に「overflow: hidden;」を使用する。

クラス「clearfix」に「overflow: hidden;」を設定します。
「overflow: hidden;」により、この親要素で完結されるため、①の手法と同じ効果が得られます。
しかし、この手法のデメリットは、この親要素の外に子要素を出すことが出来ないため、position等の設定に制限が生じます。

.clearfix {
overflow: hidden;
}
.left-box{
float: left;
width: 130px;
height: 130px;
padding: 10px;
margin-right: 10px;
background-color: #dddddd;
}

DEMOはこちら

①の手法の場合

float: left;
width: 150px;

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

②の手法の場合

float: left;
width: 150px;

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

five × 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧