【marginが効かない時-float編-】効かない原因と解決法について図解で分かりやすく説明

marginが効かない -float編-

margin-top・margin-bottomが効かないパターンがインラインレベル要素(幅高さをもたない要素)の他にもあります。

floatをキャンセルするclear:both;された要素にはmargin-topが効きません。

 

 

図の通りclear: both;をした要素にmargin-topを使用しても何の反応も示しません。

逆にfloat側から下の要素に向けてのmarginは働きかけます。

 

その原因はなんなのか?

 

clear: both;の働きについて

clear: both;はfloatを解除するもの、全ての要素に対する回り込みを解除する働きのあるものです。

 

しかしどうやって解除されているよな見え方になるのか考えていきましょう。

 

floatの下にあるコンテンツにclear: both;を指定し回り込み解除されますが、その解除された要素の中で何が起こっているのかというと、上にあるfloatされた要素の高さを自動計算しその分margin-topが働いているのです。

 

つまり clear: both; = margin-top : floatされている要素の高さ;  ということです。

 

例としてfloatされた要素の高さが100pxだった場合、margin-topに110pxと100pxの高さを超える値を指定してあげると10px分のmarginが効きます。

 

 

これはこのclear:both;を指定することで何が起こっているのかを説明するためであって、

図のようにfloatの下の要素にmargin-topの数値をコンテンツの高さより多く指定するのは無意味な記述であります。

 

コンテンツの高さが変わる場合、いちいち修正しないといけません。また他者が見たときに分かりにくい。

floatがかかっているコンテンツの下のコンテンツがそのfloatされたコンテンツの高さを超えるmargin-topを指定して余白を設けるのは絶対にやめましょう。


ただこのclear:both;は上に浮いているfloatの高さ分しか自動計算してくれません。

そしてfloat側のコンテンツが下のclear: both;を指定しているコンテンツに対してにしかmarginが効きません

(つまりmargin-bottomのみ有効)

下の要素が上のfloatの要素にmargin-topをしたい場合は他の書き方が必要です。

 

floatの下のコンテンツがfloatがかかっているコンテンツに対してmarginが効かない時の解決法

上の解説でfloatされて浮いている要素側から下のコンテンツに向かってmarginを有効にさせるため下の要素にclear: both;を指定してあげることについて説明しましたが、

下の要素が上の浮いている要素(floatしている要素)に向かって余白を設けたい場合はどうしたらいいのでしょう。

 

float解除『clearfix:after;』を使ってあげる。

 

まずfloatした要素を囲うブロック要素を作ってあげます。

図でいうピンクのエリア(親要素)です。

 

floatしている要素をhtmlでただ囲っただけでは中の要素が浮いているのでこのままだとの親要素は高さを持ちません。

つまりぺしゃんに潰れます。

 

なのでそのfloatを囲った親要素に疑似クラスでclearfixを指定し、高さのない箱にfloatされた要素と同じ体積をcssで作ってあげることでfloatした要素を包んでいるような、親要素が完成します。

 

つまり空っぽの箱にその中にある浮いてる要素と同じ高さの見えないコンテンツをcssで作ってあげます。

 

floatした要素の親に疑似クラスでclearfixを指定する

float解除の基本的記述

 

.clearfix{
display: block;
clear: both;
content: “”;
}

 

『display: block;』要素をブロック化する

『clear:both;』floatされているコンテンツの高さを取得しその高さを保つ

『content: “”;』コンテンツとして認識させる

 

cssでclearfixというセレクタにfloatを解除する記述を作りましょう。

 

このクラス名をfloatが入っている親要素に追加してあげることで要素に高さができて、その下の要素が上に要素の存在を認識してくれます。

 

高さを作ってあげた親要素(図でいうピンクのエリア)の下の要素にclear: both;を指定してあげると下からでも上のfloatした要素に向かってのmargin-topが働きます。

 

margin paddingの基本的な働きについての分かりやすく解説しているページはこちらから