【CSS】回り込みを指定する：float・回り込みを解除する：clearflix

floatとは？

現在は、レイアウトボックスを作る際に使用されますが、本来は文章などの回り込みを指定するプロパティです。

要素を右側に回り込ませる

foloat:left;を指定すれば、後ろに続く要素を右側に回り込ませることができます。

<div id = "boxa">
        <p>
            aaaaaa
        </p>
    </div>
    <div id ="boxb">
        <p>
            bbbbbb
        </p>
    </div>
　　<div id ="boxc">
        <p>
            cccccc
        </p>
    </div>

#boxa{
    background-color:yellow;
    float: left;
    height:150px;
  }
  
#boxb{
    background-color:red;
  }
}

#boxc{
    background-color:blue;
  }
}

すると、次のように表示されます。

floatを使うと、その要素の高さと幅が指定しない限り最小のものになります。また、floatの性質（右に回り込み）は後ろに続く要素全てに続きます。つまり、上記のコードのboxaの高さが満たされるまでは、他の要素は右に回り込むということです。

aaaaaa

bbbbbb

cccccc

回り込みをクリアする：clear

しかし、boxcを回り込ませたくないとします。その際にはclearを使って回り込みを解除することができます。

#boxa{
    background-color:yellow;
    float: left;
    height:150px;
  }
  
#boxb{
    background-color:red;
  }


#boxc{
    background-color:blue;
    clear:left;
  }

すると次のように表示されます。

aaaaaa

bbbbbb

cccccc

clearflixを使ってfloatを解除する

例えばboxa、boxbにclear:flexを書くと、boxcが隠れてしまいます。floatというのは「浮かす」という意味があるので、boxcはboxaとboxbの裏に隠れてしまっているわけです。

boxcにclear:left;を記述してやってもこの状態を解除することができますが、clearflixという方法を使うこともできます。

clearflixはfloatが掛かっている要素全体を覆うことで、バリア的なものが張られ、それ以後はfloatが適用されなくなります。

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

#boxa{
    width:200px;
    height: 200px;
    background-color:yellow;
    float: left;
  }
  
#boxb{
    width:200px;
    height: 200px;
    background-color:red;
    float:left;
  }


#boxc{
    width:200px;
    height: 200px;
    background-color:blue;
  }

  #clear:after{
      content:"";   
      display:block;
      clear:both;
  }

clearflixとはプロパティの名前ではなくて、技術の名前なんです。内容としては、選択した要素の最後の子要素として擬似要素を作成し、「clear:both;」を指定するという単純なものです。

:after(::after)とは？

:afterは指定した要素の最後の子要素として疑似要素を作成します。contentプロパティを使って要素に装飾的な内容を追加することができます。:afterも::afterも同じ意味です。

.classname:after {
  content: '内容';
  〜スタイル指定〜
}

.classname::after {
  content: '内容';
  〜スタイル指定〜
}

floatでボックスを横に並べる

よくあるheader、sub、main、footerのボックスもfloatで作ることも可能です。subとmainの合計が100%となっているので、footerは下に位置しています。

   <div id="header">
        header   
    </div>
    <div id="sub">
        sub
    </div>
    <div id="main">
        main
    </div>
    <div id="footer">
        footer
    </div>

#header{
  background:red;
  width:100%;
}

#sub{
  background:blue;
  width:30%;
  height:200px;
  float:left;
}

#main{
  background:yellow;
  width:70%;
  height:200px;
  float:right;
}

#footer{
  background:purple;
  width:100%;
}

sub

main