floatについて

float

floatを指定した次の要素は、右側に回り込むようになります。

通常の配置から、左右どちらかに配置させるようにします。親要素の高さが決まっておらず、子の高さで指定されている場合は、親の高さがfloatを指定した子要素により失われてしまいます(親の背景がなくなる問題)。なので子のfloatを解除する必要があります。

floatの注意点

  • floatを指定したら、必ずwidthを指定しなければなりません。
  • floatを適用した親要素の子要素の高さは0になってしまいます。
  • floatを適用すると、上下の要素同士におけるmarginの相殺が起こりません。
  • インラインボックスにfloatを指定すると、ブロックボックスになります。
  • clearプロパティは、ブロック要素にしか指定できません。
  • floatした要素の下の要素に、margin-topを適用させたい場合は、floatした要素にmargin-bottomを指定してください。

floatの解除

clearfix

floatを使用する要素の親要素に指定して、回り込みを解除します。

clearfix:after {
    visibility: hidden;
    content: " ";  
    display: block;  
    visibility: hidden;  
    height: 0px;
    clear: both;  // ブロック要素にしか指定できません。
}
<div class="contents clearfix">
    <div class="">
        これにフロート
    </div>
</div>
<div class="">
    回り込みしない
</div>


overflow: hidden;

clearfixと同じく、floatを使用する要素の親要素に指定して、回り込みを解除します。

.contents{
    overflow:hidden;
    zoom:1; // IE対策
}


<div class="contents">
    <div class="">
        これにフロート
    </div>
</div>
<div class="">
    回り込みしない
</div>


hrt0kmt.hatenablog.com