marginが効かない時の対処法【float編】 | floatを使うとmarginがきかない原因と解決法について図解で分かりやすく説明




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の数値をコンテンツの高さより多く指定するのは無意味な記述なので別の方法(下記で説明)で解消させます。

 

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されたコンテンツは浮いている(中の要素が浮いている)状態なのでのでこのままだとの親要素は高さを持ちません。

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

 

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

 

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

 

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

 

float解除の基本的記述

 

 

 

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

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

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

 

 

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

 

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

 

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

 

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

 

 

float時に下のclear:both;を設定した要素がmargin-topがきかない考え方まとめ

clear:both;はfloatされた要素の回り込みを解除する働きがある。

回り込み解除された中で怒っていることはfloatされたコンテンツの高さを自動計算してmargin-topがきいているようなイメージ。

なので上にあるfloatされたコンテンツの高さより大きい数値でmargin-topを指定するとその差の数値分margin-topにより余白ができるがコンテンツの高さが変わることこの働きは崩れる。

 

解決法としてfloatされた要素を別の要素(親要素)で囲い、浮いているコンテンツと同じ体積の箱を作る。

同じ体積を作る方法としてfloatされているコンテンツは浮いているため理屈的には囲う事はできないので、親要素の高さをクラス名clearfixでclear:after;指定をCSSに書き込む。

floatされたコンテンツを囲う親要素ができたので、下のclear:both;で回り込み解除されたコンテンツが上にコンテンツがあることを認識しmargin-topがきくようになる。

 

 

完全初心者向けのHTML・CSS言語を使ってサイトを作るためのおすすめ教材本についても是非参考にしてください。

 

 

フリーターからWeb業界へ転職した話については以下より。