LogoMark.png

CSS/Float

CSS|Float


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

Floatの仕様

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

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を用いてメニューを横に並べるには、以下のようにします。

PAGES

GUIDE

DATA

Last-modified: 2019-07-05 (金) 20:51:11