html floatの基本 高さを認識させる

はじめに

htmlの基本のfloatの処理、高さを認識させる手法をまとめます。
html初心者の方ははじめはfloatに壁を感じてしまうかもしれませんが、慣れれば難しいことはありません。
ここで、頭の整理をしましょう。

floatについて

floatは左右に要素を回りこませたいときに使います。
注意点としては、floatという名前通り、要素を浮かしているということを忘れてはいけないということです。

floatは浮いているんだ！！

常にこの意識を持ちましょう。

floatを使った要素の親要素はheight:auto;(デフォルト) では高さ0となってしまいます。これは要素が浮いていて、高さが認識されていないのです。

では、高さを認識させるには？

目次
1. 親要素にoverflow:hidden; または overflow:auto;を使う
2. floatした要素の直後の要素にclear:both;をつける
3. clearfixを使う

1. 親要素にoverflow:hidden; または overflow:auto;を使う

ボックスの高さは中身で決まります。cssのルールではoverflow:visibleだとfloatしたもの（浮動化ボックス）は中身だとは認識されません。
しかし、overflow:visible以外では浮動化ボックスも中身として計算されます。
つまり、高さが認識されるのです。

とにかく、親要素のoverflowをhiddenかautoにすると高さが認識されるということです。

注意点としては、overflow:hidden;を高さを認識させるおまじないのように使っていくと、中身がはみ出してしまった時、表示されなくなるので、レイアウトが崩れてしまうということです。

2.floatした要素の直後の要素にclear:both;をつける

clear:both;を付け忘れると、floatした要素の下に潜り込んでしまいます。だって、floatした要素は浮いていますからね。clear:both;をかけた要素がそれ以降の要素が潜り込むのをせき止めるイメージです。

ちなみに、clearというプロパティにはleftとrightという値をとれるのですが(それぞれ左だけせき止めると右だけせき止める）、bothだけで十分です。clear:left;をつかったり、clear:right;を使ったりすると後々どっち使ったかややこしくなりますしね。

3.clearfixを使う

親要素のクラスにclearfixを加え、cssを以下のように記述する。

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/**/

難易度の高いテクニックなので、初めのうちは内容を理解する必要はないです。イメージとしては、見えない要素を一番下に加えて、そこでclear:both;でfloatをせき止めるという感じです。
また、上記のcssは一例です。

まとめ

基本的にfloatを使ったら、どれかの方法で解除することを考える必要があります。
個人的には、3 のclearfixが使いやすいです。

また、新しい手法も出てくるかもしれません。