floatとclear

要素を横に並べる時は、floatプロパティをよく使います。 floatは、clearとセットになっており、clearを忘れてしまうとレイアウト崩れを起こす可能性があるので、必ずclearするようにします。

基本的な使い方

以下の写真の様なレイアウトを実現したい時の実現方法を例に解説します。

次の様なコードで実現していきます。

HTML
<div>
<img src="img/hana.jpg" alt="">
<h2>花です</h2>
<p>綺麗な青い花です。どこかで撮影しました。</p>
</div>

CSS
img {
float: left;
}

これで、花の写真とテキストが横並びになります。
ただし、このままだと以下の画像の様に、本来横になって欲しく無いテキストも横になってしまいます。

この様に、floatの効果は、下の要素を引き連れてしまいます。
なので、floatの効果を切りたいところにclearプロパティを指定する必要があります。

CSS
p{
clear:both;
}

以上の記述をCSSに追記すれば、以下の写真の様に、想定したレイアウトになります。

ナビゲーションの作り方とclearfixの使い方

以上が、floatとclearの基本的な使い方です。
次は、簡単なナビゲーションを作ってみます。

ナビゲーションを作る時、以下のようなコードで横並びに出来ます。

HTML
<ul>
<li><a href="">TOP</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>

CSS
li{
width:200px;
float:left;
background-color:#fc0;
text-align: center;
}

※background-colorと、text-alignは、わかりやすいように色をつけるためと、要素のまんまかにテキストを書くために使っていて、floatとは直接関係ありません。

ただし、このままだとclearしていないので、レイアウト崩れを起こす危険性があります。
よって、clearしたいのですが、前述の花のサンプルの様に、floatを止められる要素がありません。
こんな時には、clearfixと呼ばれる方法でclearすると便利です。

clearfixは、概ね以下の3つの工程で出来ています。

1.after擬似要素で空の要素を作る

横並びになっている要素を括っている要素に、（今回はul要素）CSSの::afterを使って、空の擬似要素を作ります。

CSS
ul::after{
content:"";
}

content:""は、空の要素を作るという意味です。

2.after擬似要素をブロック要素に変える

clearプロパティを設定できるのは、ブロック要素に限られます。 content:""で作り出した空の要素は、インライン要素なので、ブロック要素に変える必要があります。以下のコードを追記します。

CSS
ul::after{
content:"";
display:block; /*追記*/
}

3.clearプロパティを追加

最後に、clearプロパティを追加します。

CSS
ul::after{
content:"";
display:block;
clear:both: /*追記*/
}

以上で正しくclear出来ます。

clearfixまとめ

以上が、clearfixによるclear方法です。「横並びにしたいもの」を、「括っている要素」にclearfixをかける。というのが基本的な考え方です。この際、横並びにしたいものが何個あろうと関係ありません。

HTML
<ul>
<li><a href="">TOP</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>

CSS
li{
width:200px;
float:left;
background-color:#fc0;
text-align: center;
}

ul::after{
content:"";
display:block;
clear:both;
}

overflow:hiddenよるclear方法

後続としてあげておきます。
clearfixと同じ様な考え方で、overflow:hidden;を使う方法があります。 clearfixと同様に、横並びにしたいものを括っている要素に対して、overflow:hiddenを指定することで、clearしたのと同等の効果が得られます。前述のナビのコードを、clearfixではなく、overflow:hiddenを使用した場合のコードを書いておきます。

HTML
<ul>
<li><a href="">TOP</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>

CSS
li{
width:200px;
float:left;
background-color:#fc0;
text-align: center;
}

ul{
overflow:hidden;
}

こちらの方法でclearしても問題ありません。
※ただし、overflowを使った方法は、正確には、「clearした」ではなく、「overflow:hiddenの特性として、clearと同等の効果が得られた」ということになります。