CSS/Float

CSS｜Float

Flexboxの登場により、この手法の仕様頻度は減っています。Flexbox についての情報を未読の方は、まず先に CSS/Flexbox のページをお読み下さい。

Floatの仕様

Floatには、以下のようなプロパティーがあります。

• left：指定要素を左寄せします。後続の要素はその右側に回り込みます。
• right：指定要素を右寄せします。後続の内容はその左側に回り込みます。
• none：デフォルト値です。
  
  

Float によるレイアウト

以下のように あるブロック（箱）のCSSに float を書き加えると、ブロックは左に（右に）回り込みながら、詰め込まれていきます。後続の要素はスペースに余裕のあるかぎり、左（右）へ回り込んで、横に並ぶことになります。

float : left;　（ float : right; ）

ただし、回り込みは一旦定義すると、左右に余白がある限り、その後の要素も自動的に回り込んでしまうので、これ以上は回り込みさせたくない…という次の要素のところで回り込みをストップさせる必要があります。その場合は、回り込み設定の「解除」という意味で、

clear : both;　（clear : left; 　clear : right; ）

と書きます。

floatとclearfix

さて、その回り込みの解除ですが、floatを解除する為に次のボックスでclearを設定しなければならないというのは、あまりスマートではありません。また一部のブラウザでは、親要素内でfloatを解除しなかった場合、親要素の背景画像が表示されない、親要素の下まで表示されないといった現象が生じて困る場合があります。そこで、float要素を囲む親要素自体でfloatを解除する手段としてclearfix という方法がよく用いられます。以下、使い方の例をHTMLとCSSのセットで紹介します

html

<div id="mainbox" class="clearfix">   ←  class="clearfix" を定義
      <div id="box-a"> 〜 </div>  ← float
      <div id="box-b"> 〜 </div>   ← float
　　　　：
</div>

css

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

これは要するに、親要素の最後にダミー文字を挿入して、それをブロック要素として扱い、そこでClearするというアイデアです。

floatを用いたメニューの横並びレイアウトの例

floatを用いてメニューを横に並べるには、以下のようにします。

• HTML側の記述
  メニュー部分のHTMLが以下のようになっていることを前提とします。
  nav という箱の中に li で囲まれた小さな箱が複数入るイメージです。
  ＜li＞を使わず＜br＞で改行したものは、いくらがんばっても横には並びません。

   <nav>
       <ul class="clearfix">
           <li ><a href="#">top</a></li>
           <li><a href="#">gallery</a></li>
           <li><a href="#">links</a></li>
           <li><a href="#">about</a></li>
       </ul>
   </nav>

• CSS側の記述

  nav {
      width:700px;　←　項目が並ぶだけの幅の余裕が必要です。
      : その他略
  }
  
  nav li{
     float:left;
     width:100px;
      : その他略
  }
  
  .clearfix:after {  
        content: ".";   
        display: block;   
        height: 0;   
        clear: both;   
        visibility: hidden;  
  }