acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

floatを使ったブロック要素の右寄せ、左寄せとclearの方法

ads

2012/8/20 初稿

CSSでレイアウトするときに必須なのがfloatを使ったレイアウトです。しかし初めのうちはpositionとともに仕組みがわかりにくいプロパティの一つです。
そこでfloatの厳密な原理というよりは、レイアウトに使うときの感覚としてこう覚えておけば苦労はしないということを基準に解説します。厳密な原理についてはW3Sの9.5.1 浮動体の配置: 'float'プロパティ(日本語訳ページ)をご覧ください。

まずはfloatの主に使用するときの例を2つ解説します。

floatとは文字通りほかのレイアウトから浮かすことで、後続の要素は浮くことによって空いたスペースの上まで、右または左に詰まります。これにより雑誌などのように画像にテキストが回り込んだようなレイアウトになります。

通常のDiv

通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP

通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP

このDivにfloat:right;を指定すると、floatを使った右寄せの状態になります。leftを指定すれば左寄せの状態になります。

floatされたDiv

通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP

通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP通常のP

<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>

.float{
float:right;
width:200px;
height:100px;
background: #999;
}
p{
background: #bbb;
margin-bottom:1em;
}

雑誌のような文字と画像でだけではなく枠組みのレイアウトに使うことにより2カラムや3カラムなどのレイアウトにすることができます。

floatされたDiv
floatされたDiv
floatされたDiv

<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>

.float{
float:left;
width:200px;
height:100px;
margin-right:20px;
background: #999;
}

そして、floatを使うときに注意することは、幅の計算をきちんとすること、float含む親要素に高さの影響をあたえないこと、適切な場所でclearすることの3点です。

1点目は、幅の計算をきちんとするということです。
左右に並べて2カラムを作ったりするときに幅のピクセル数を正確に計算することは当たり前のことですが、計算ミスなどにより親要素の幅を1pxでも超えてしまうとfloat落ち、カラム落ちなどと呼ばれるレイアウトの崩れが発生します。
下の例では親要素が600pxのところを子要素が300px+301px=601pxになっているために横並びにならずに縦並びになっています。親要素の幅を超えてしまわないようにしましょう。

親要素Div 幅600px

floatされたDiv 幅300px
floatされたDiv 幅301px

<div>
<div class="float1">floatされたDiv 幅300px</div>
<div class="float2">floatされたDiv 幅301px</div>
</div>

.wrap{
width:600px;
padding:20px;
background: #bbb;
}
.float1{
float:left;
width:300px;
height:100px;
background: #999;
}
.float2{
float:left;
width:301px;
height:100px;
background: #888;
}

2点目は、高さの影響をあたえないことです。
先ほども解説したようにほかの要素から浮いて切り離された状態になります。しかしposition:absolute;のみのように完全に切り離されるわけではなく、インライン要素に対して幅と高さを確保しつつもブロック要素の高さの計算には影響をあたえないということです。これにより雑誌のようなレイアウトにすることができまが、この関係でfloatさせた要素の方が高さがある場合に背景が切れたように見えます。

親要素Div

floatされたDiv

通常のP

通常のP

<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>

.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}

3点目は、適切な場所でclearするということです。厳密な原理についてはW3Sの9.5.2 浮動体に隣接するフローの制御: 'clear'プロパティ(日本語訳ページ)をご覧ください。
floatはclearするまで後続の要素に影響をあたえ続けます。その影響を止めるために、たいていの場合影響させたくないブロック要素にclear:bothを指定します。
先ほどのサンプルのPとPの間にclearを指定したDivをたしました。
これにより2番目のPはfloatの影響をうけなくなりました。それとともに親要素の中でclearした場合は高さの計算がclearした要素以降まで含まれるようになるため背景色が2番目のPまで続くようになりました。親要素の外でclearした場合は先ほどと同じように背景は切れたように見えたままになります。

親要素Div

floatされたDiv

通常のP

clear:both;を指定したDiv

通常のP

<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>
<div class="clear">clear:both;を指定したDiv</div>

.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}
.clear{
clear:both;
background: #888;
}

このサンプルのように毎回親要素の中でclearできるとは限りません。しかし背景色はflatした要素の高さまで続いてほしいといった場合は多々あります。こういったときにclearfixと呼ばれるCSSのテクニックが必要になります。
検索でclearfixと入れるといろいろなパターンのコードが出てきますが 最近のブラウザを対象とする場合は以下のコードで不具合が出ることはありませんしIE6までにも対応しています。また、clearfixという名前は単なるクラス名ですので自由に変更することもできます。

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

親要素Div

floatされたDiv

通常のP

通常のP

<div class="clearfix">
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>

このコードだけではなくoverflow: hidden;を使ったコードでも同じ効果をあたえることができます。しかしoverflow: hidden;を使うので一部がはみ出たようなデザインにする場合ははみ出た部分が消えてしまうので注意が必要です。

.clearfix{
overflow: hidden;
/zoom:1;
}

floatを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.