floatプロパティをclearfixで解除

floatの本質は文字を回り込ませることではなく、コーヒーからあがる湯気のようにブロックレベル要素を浮かせるためのプロパティです。

通常フローから浮き上がって別のフローを作っているので、別のフローを一旦clearして通常フローに戻してあげる必要がありますが、そのためにはclear属性を使ったり、親要素のoverflow属性値をhiddenに設定することでフロートを解除するなどの方法があります。

親要素の高さが計算されずマージンの基点がおかしい

floatで横並び(右寄せ)

普通にブロックレベル要素を並べるとこのように縦並びですが・・・

なし
なし
なし

以下のようにfloatを指定(width必須)すると配置が変わります。

float:left; width: 150px
float:left; width: 150px
float:left; width: 150px
float:left; width: 150px
float:left; width: 150px
clear:left; width: 150px
float:left; width: 150px
float:left; width: 150px
なし width: 150px

clearfixでfloat解除

これ、普通にマージンが10pxずつ空いていますけど、上述のとおりfloatを設定している子ブロック要素は全部浮いているので、親ブロック要素ABC1の高さは0pxと見なされ、マージンの基点が親ブロック要素の左上、つまり0pxの位置と見なされます。

よって親ブロック要素に設定するマージンの高さは、子要素の高さ20px以内では表示されず、20px以上ではじめて反映され始めます。

だから通常の配置の流れの中にfloatをクリアするブロックレベル要素を作れば、そこを基点にマージンが計算されます。

ただ格好悪いので、擬似要素afterを使って、親ブロック要素の末尾、つまり最後の子要素の後ろに

  1. 中身はブランクの(content:””;)
  2. ダミーのブロックレベル要素(display: block;)
  3. vertical-alignのベースラインをはみ出ないように(font-size: 0;)
  4. そこでクリア(clear: both;)しています。

ちなみにこのafter擬似要素とclearプロパティを使ってフロートを解除することをclearfixといいます。

ちなみに擬似要素(after, first-lineなど)はHTMLソースには存在しない要素を表す要素であり、例えば「:after」なら「あるタグに含まれる内容の末尾」になり、このようなHTMLタグが実際に書かれているわけではありません。

似たものとして擬似クラスがありますが、これはある要素の状態(hover, activeなど)を指定するときに使います。

親要素が子要素を囲むことができず背景が消える

浮いた子要素を親要素が認識できない

子要素がfloatで浮いているので親要素は子要素の存在を認識できず、paddingによって子要素を囲むことができません。

left
right

ダミー子要素(兄弟要素)でfloat解除

いちばん簡単なのはfloatしている子要素のダミーの兄弟要素を作って「clear:left;」でクリアすることですが、格好悪っ・・・。

left
right

親要素に高さ指定

もっとも親要素に高さを設定していれば、背景色が表示されますが・・・

left
right

clearfixでfloat解除

高さを正しく設定するためにエネルギーを費やすよりも、親要素が完了した時点でfloatを解除してあげれば親要素のpaddingが効くようになります。

これは親要素の中身の末尾(:after)、すなわちright子要素の後ろに、ダミーの兄弟ブロック要素(display: block;)を挿入して、中身としてブランクを挿入して(content:” “)、フロートをクリア(clear: both;)しています。

left
right

親要素のoverflowプロパティをhiddenにしてfloat解除

after擬似要素とclearプロパティでフロートを解除する方法をclearfixといいますが、もっと簡単に親要素にoverflowプロパティの値としてhiddenを設定する方法もあります。

left
right

親要素に何も指定がない場合

親要素にpaddingも高さも指定されていないと、子要素が浮き上がって別フローになっているので、親要素は子要素を含有することにより確保していた高さを失い、背景色が表示されません。

left