floatプロパティを適用した要素を配置した場合、その後に続く要素に影響を与えます。そのため、適用後に、floatプロパティと対になるclearプロパティを使うなどしてfloatを解除する必要があります。

そこで、floatを解除する方法を備忘録としてまとめました。

サンプルは、いずれも、「float:left」を指定した3つの画像(dummy01からdummy03)とその親要素div(グレーの背景)、それに続くレイアウト確認用のテキストを入れたdiv(薄いオレンジ色の背景)で構成されています。

サンプル01(float解除無し)

サンプル01は、float解除をしていないため、親要素(グレー部分)がフロートした要素を認識できず、高さがなくなり、下のテキスト要素を含むdivが、親要素のすぐ下に回り込んでいます。
フロート画像1 フロート画像2 フロート画像3
floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素

サンプル01 htmlソース

<div class="testwrap"> 
    <img src="../img8/dummy01.jpg" alt="フロート画像1" height="50" width="150">
    <img src="../img8/dummy02.jpg" alt="フロート画像2" height="50" width="150">
    <img src="../img8/dummy03.jpg" alt="フロート画像3" height="50" width="150">
</div>
<div class="nextt">floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素
floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素
floatの後に続くテキスト要素</div> 

サンプル02(clear:bothを使用してfloatを解除)

サンプル02は、clear:bothを使用して floatを解除しています。親要素内の3つ目のフロート画像(img要素)の後ろに空のp要素を使って直接スタイルを指定しています。3つの画像は、親要素内に収まっています。

サンプル02 htmlソース(部分)

<div class="testwrap"> 
    <img src="../img8/dummy01.jpg" alt="フロート画像1" height="50" width="150">
    <img src="../img8/dummy02.jpg" alt="フロート画像2" height="50" width="150">
    <img src="../img8/dummy03.jpg" alt="フロート画像3" height="50" width="150">
    <p style="clear:both"></p> <!-- フロート解除 -->
</div>
フロート画像1 フロート画像2 フロート画像3

floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素

サンプル03(clearfixを使用してfloatを解除)

サンプル03は、:after疑似要素を使ったclearfix(CSSのclass名)で floatを解除しています。InternetExplorerの古いバージョンのサポートが終了したため、clearfixの記述が短くシンプルなもので事足りるようになりました。

サンプル03 htmlソース(部分)

<div class="clearfix testwrap"> 
    <img src="../img8/dummy01.jpg" alt="フロート画像1" height="50" width="150">
    <img src="../img8/dummy02.jpg" alt="フロート画像2" height="50" width="150">
    <img src="../img8/dummy03.jpg" alt="フロート画像3" height="50" width="150">
</div>

サンプル03 CSSソース

.clearfix:after  {
    content:""; 
    display:block; 
    clear:both;
    }
フロート画像1 フロート画像2 フロート画像3
floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素

サンプル04(overflow:hiddenを使用してfloatを解除)

サンプル04は、overflowプロパティを親要素に指定することでfloatを解除しています。overflowプロパティの値はautoなどでも構いませんが、もっとも無難なhiddenにしています。サンプル02、サンプル03に比べて、タグを追加すること無く、短い記述で済むのが特長です。

サンプル04 htmlソース(部分)

<div class="testwrap" style="overflow:hidden;"> 
    <img src="../img8/dummy01.jpg" alt="フロート画像1" height="50" width="150">
    <img src="../img8/dummy02.jpg" alt="フロート画像2" height="50" width="150">
    <img src="../img8/dummy03.jpg" alt="フロート画像3" height="50" width="150">
</div>
フロート画像1 フロート画像2 フロート画像3
floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素floatの後に続くテキスト要素

 

以上3つが、現時点で使用しているfloat解除法です。HTML5のflexなどの使用が増え、カラムをfloatで組むことは少なくなってきましたが、それでもfloatを使うケースはなくなってはいません。また、要素が複雑に絡んだレイアウトや、かなり以前に作成したレイアウト、他のかたが作成したものの修正などで、float解除法を間違えると、他の要素との絡みで修復不可能と思える程崩れることがあります。そんなとき、この3つの方法を試し、使い分けています。

 

 

戻るボタン