floatプロパティをclearfixで解除

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

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
//緑・青・赤の要素全部左寄せ
//子ブロック要素は全部浮いているので親ブロック要素の高さは0pxと見なされる。
//マージンの基点が親ブロック要素の左上、つまり0pxの位置と見なされる。
//親要素に擬似要素afterを使って、親ブロック要素の末尾にブランクの(content:””;)
//ダミーのブロックレベル要素(display: block;)を追加して、そこでクリア(clear: both;)する。
<div id="ABC1" style="width: 465px; margin-bottom: 10px;">
    <div id="A1" style="width: 150px; height: 20px; background-color: #009900; float: left;">float:left; width: 150px</div>
    <div id="B1" style="width: 150px; height: 20px; background-color: #0033ff; float: left;">float:left; width: 150px</div>
    <div id="C1" style="width: 150px; height: 20px; background-color: #ff0066; float: left;">float:left; width: 150px</div>
</div>

//青要素のfloatの流れを赤でクリア
<div id="ABC2" style="width: 465px; margin-bottom: 10px;">
    <div id="A2" style="width: 150px; height: 20px; background-color: #009900; float: left;">float:left; width: 150px</div>
    <div id="B2" style="width: 150px; height: 20px; background-color: #0033ff; float: left;">float:left; width: 150px</div>
    <div id="C2" style="width: 150px; height: 20px; background-color: #ff0066; clear: left;">clear:left; width: 150px</div>
</div>

//緑要素と青要素が浮いて空いたスペースにフロートなしの赤要素が入っているので緑要素に隠れて見えない。
//floatの後のコンテンツ「なし」は反対に回り込もうとするも赤要素のwidthが150pxしかないので下に追いやられる。
<div id="ABC3" style="width: 465px; margin-bottom: 10px;">
    <div id="A3" style="width: 150px; height: 20px; background-color: #009900; float: left;">float:left; width: 150px</div>
    <div id="B3" style="width: 150px; height: 20px; background-color: #0033ff; float: left;">float:left; width: 150px</div>
    <div id="C3" style="width: 150px; height: 20px; background-color: #ff0066;">なし width: 150px</div>
</div>

clearfixでfloat解除

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

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

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

<p style="clear:both;"></p>

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

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

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

<style>
	#ABC1:after, #ABC2:after, #ABC3:after{
		content:"";
		display:block;
		font-size: 0;
		clear:both;
	}
</style>

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

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




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

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

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

#header1{
    padding: 10px;
}
<div id="header1" style="font-family: Meiryo UI; font-size: 12px; width=100%; background-color:yellow; padding: 10px;">
	<div id="left2" style="width: 50%; background-color: orange; float: left;">left</div>
	<div id="right2" style="width: 50%; background-color: purple; float: right;">right</div>
</div>
left
right

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

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

#header5{
    padding: 10px;
}
<div id="header5" style="font-family: Meiryo UI; font-size: 12px; width=100%; background-color:yellow; padding: 10px;">
	<div id="left2" style="width: 50%; background-color: orange; float: left;">left</div>
	<div id="right2" style="width: 50%; background-color: purple; float: right;">right</div>
        <p style="clear:left; height:0px;"></p>
</div>
left
right

親要素に高さ指定

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

#header1{
    padding: 10px;
    height:30px;
}
<div id="header2" style="font-family: Meiryo UI; font-size: 12px; width=100%; background-color:yellow; height:30px; padding: 5px;">
	<div id="left2" style="width: 50%; background-color: orange; float: left;">left</div>
	<div id="right2" style="width: 50%; background-color: purple; float: right;">right</div>
</div>
left
right

clearfixでfloat解除

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

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

#header4{
    padding: 10px;
    height:30px;
}

#header4:after{
    content:" ";
    display: block;
    clear: both;
}

<div id="header4" style="font-family: Meiryo UI; font-size: 12px; width=100%; background-color:yellow; height:30px; padding: 5px;">
	<div id="left2" style="width: 50%; background-color: orange; float: left;">left</div>
	<div id="right2" style="width: 50%; background-color: purple; float: right;">right</div>
</div>

left
right

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

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

#header5{
    padding: 10px;
    overflow:hidden;
}
<div id="header6" style="font-family: Meiryo UI; font-size: 12px; width=100%; background-color:yellow; padding: 10px; overflow:hidden;">
	<div id="left2" style="width: 50%; background-color: orange; float: left;">left</div>
	<div id="right2" style="width: 50%; background-color: purple; float: right;">right</div>
</div>
left
right

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

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

#header1{

}
left