HOME
サイトマップ
営業日カレンダー
お問い合わせ

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つの方法を試し、使い分けています。

 

 

戻るボタン