hello foo bar Saba note | floatの解除でmarginが効かなくなる

floatの解除でmarginが効かなくなる

2017.1.4 (水)

ブロック要素にfloatをかけるとCSSでは高さが消滅します。試しにbackgroundに何らかの色をつけても効かないし、Developerツール辺りでそこらをわさわさしてもマーキングされません。なので基本的にはそのfloat要素と隣接する他の要素にも影響してmarginが効かなくなります。marginはある一定量の大きさに対してmarginを指定するので、高さのない要素にも効かないということになっているようです。

floatを解除する方法は、

でclearする方法

<

div>の空要素にclearする方法
– floatしている親要素にclearfixする方法
があります。どれも一長一短ですが、
は基本的には使わない方がいいです。
はHTML5では廃止予定になっているようです。また、空のdivにclear:bothをかけてやる方法ですが、一番手軽でわかりやすい。私も小さな仕事では多様している感がありますが、空要素というのもあまり推奨されない。最後のclearfixですが、CSSコードが煩雑になるのと、IEとかそこら辺りを網羅しようと思うといきなりデザインが崩れたりします。適材適所といったところです。

/* clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

clearfixでは上記で大丈夫。floatしている親要素のdivなどに上記クラスを割り当てると周囲のmarginが効くようになります。