Web制作

floatでレイアウトした回り込みを解除する2つの方法

2016.02.10

2017.05.18

困り顔の眼鏡の男性

  • floatでレイアウトした枠の背景が表示されない!
  • floatでレイアウトしたら回り込みさせたくない要素までまわりこんでしまう!

コーディングをしたことがある方なら誰もが一度は経験したことがあることだと思います。

本日はfloatでレイアウトした回り込みを解除する方法を二つご紹介します。

clearfixを使用して回り込みを解除する

使用方法はいたって単純です。floatで周り込みを設定した要素の親要素にclearfixを設定するだけです。
注意点としては現在は過去のブラウザのサポートを終了し、非常にシンプルなスタイルになっていますが、過去のバージョンにも対応する必要がある場合はそれに対応したclearfixの記述が必要です。

clearfixの設定例

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

2016年1月12日にIE8以前のMicrosoftのサポートが終了いたしました。
それにともない、モダンブラウザのみに対応したclearfixが上記です。
特別な理由がないかぎり上記のclearfixを使用することをお勧めします。

overflow:hiddenを使用して回り込みを解除する

clearfixと共に回り込みの解除に使用されるプロパティーとしてよく利用されるのがoverflowです。
これの値をvisible以外に設定することでも回り込みは解除できます。
autoやscrollを設定するとスクロールバーなどが表示されることもあるので、hiddenを設定することが多いです。
この方法ではcssをシンプルをにできる反面、ボックスをはみ出したあしらいなどを使用したときに切れてしまうというデメリットがあります。

overflow:hiddenの設定例

.box {
  overflow: hidden;
}

古いブラウザに対応したclearfix

最後に古いブラウザにも対応した過去のclearfixも紹介します。。

初期のclearfix

.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;  
  clear: both; 
  visibility:hidden;
}
    
.clearfix {display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */ 

当時はIEやネットスケープなど様々なブラウザに対応するために非常に長いCSSですね。
最近はここまで長いclearfixは使用しません。

micro clearfix

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

モダンブラウザとIE6,7に対応したclearfixです。初期の物に比べればかなりシンプルになっております。
すこし古いIEまで対応する必要がある場合はこちらのバージョンを使用するのが良いでしょう。

回り込みの解除は癖をつけるとなんでもないことです。floatを設定したら必ず回り込みを解除する癖をつけましょう。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。