float解除の方法

float解除 web制作

floatを使って横並びにした後にfloatを解除する必要があります。
その方法を整理しようと思いアウトプット！

clearプロパティ

HTML

<div id="boxa">boxA</div>
<div id="boxb">boxB</div>

CSS

#boxa{
    background:skyblue;
    width:100px;
    height:100px;
    float:left;
}
#boxb{
    background:pink;
    width:100px;
    height:100px;
    float:left;
}

boxAとboxBにfloat:left;を付けています。このままfloatを付けていると次の要素も右に回り込んでしまいます。そこでclearプロパティを使ってfloatを解除します。
clearプロパティは解除したい要素に対して付けます。

HTML

<div id="boxa"></div>
<div id="boxb"></div>
<div id="boxc"></div>

CSS

#boxa{
    background:skyblue;
    width:100px;
    height:100px;
    float:left;
}
#boxb{
    background:pink;
    width:100px;
    height:100px;
    float:left;
}
#boxc{
    background:lightgreen;
    width:200px;
    height:100px;
    clear:both;
}

boxCにclear:both;を付けることでboxC以降の要素のfloatを解除出来ます。

clear fix

例えば以下のようなfloatした子要素とそれを包む親要素があります。この場合子要素をfloatすると親要素（緑）の高さがなくなります。詳細はこちらをどうぞ「floatのハマりポイント」

HTML

  <div id="box">
    <div id="boxa"></div>
    <div id="boxb"></div>
    <div id="boxc"></div>
  </div>

CSS

    #box{
      background:lightgreen;
    }
    #boxa{
      background:skyblue;
      width:100px;
      height:100px;
      float:left;
    }
    #boxb{
      background:pink;
      width:100px;
      height:100px;
      float:left;
    }
    #boxc{
      background:lightsalmon;
      width:100px;
      height:100px;
      float:left;
    }

floatしない後続要素があればその要素にclearプロパティを設定すれば良いのですが、ない場合はclearfixと言うテクニックを使うと良いです。
ここで注意するのが親要素である＃boxの中でclearプロパティを設定しなければいけないと言うことです。
＃boxの外（＃boxと同じ階層）の要素にclearプロパティを設定しても意味ありません。包まれているならばその中で完結しなければなりません。
今回の場合は＃boxcの後にclearすれば良いですね。

clearfixは擬似要素を使って、その擬似要素にclearプロパティを設定していきます。

CSS

    #box{
      background:lightgreen;
    }

    /*   clearfix   */
    #box::after{
      content:"";     /*　空のコンテンツを入れる　*/
      display:block;
      clear:both;     /*　ここにclearプロパティを設定する　*/
    }

    #boxa{
      background:skyblue;
      width:100px;
      height:100px;
      float:left;
    }
    #boxb{
      background:pink;
      width:100px;
      height:100px;
      float:left;
    }
    #boxc{
      background:lightsalmon;
      width:100px;
      height:100px;
      float:left;
    }

こうすることで親要素（緑）が高さを取り戻します。

overflowプロパティ

overflowプロパティはfloat解除をするためのプロパティではないのですが、表示上同じ結果になるので知っておくと良いかもしれません。

HTML

  <div id="box">
    <div id="boxa"></div>
    <div id="boxb"></div>
    <div id="boxc"></div>
  </div>

CSS

    #box{
      background:lightgreen;
    }
    #boxa{
      background:skyblue;
      width:100px;
      height:100px;
      float:left;
    }
    #boxb{
      background:pink;
      width:100px;
      height:100px;
      float:left;
    }
    #boxc{
      background:lightsalmon;
      width:100px;
      height:100px;
      float:left;
    }

#boxの子要素がfloatしてるので親である＃boxの高さが無くなった状態になっています。
overflowを使う場合この高さが無くなった親要素に対して設定します。

#box{
  overflow:hidden;
}

たったこれだけ書けば良いです。
とても簡単で覚えやすいですが、overflowプロパティの本来の使い方は領域から溢れたコンテンツの表示方法を指定することなので、僕は使っていません。

コメント