ちょっとディープな生物の世界

【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;
  }
}

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

aaaaaa

bbbbbb

cccccc

floatを使うと、その要素の高さと幅が指定しない限り最小のものになります。

また、floatの性質(右に回り込み)は後ろに続く要素全てに続きます。つまり、上記のコードのboxaの高さが満たされるまでは、他の要素は右に回り込むということです。

回り込みをクリアする: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;」を指定するという単純なものです。

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

コメントを残す

メールアドレスが公開されることはありません。