clearfixの仕組み

clearプロパティとfloatプロパティの間では、

後続要素をclear しただけでは、

フローティングボックス（どちらか左右に寄せた要素）が、

親要素のボックスからはみ出してしまうことがある。

この問題を解消するために考えられたのが、

「clearfix」で、このテクニックを用いることで、

親要素のボックスの高さ内に、

フローティングボックスの高さを含めることができる。

◉ clearfix

親要素のセレクタに「 : after 」をつけて記述することが特徴。

「 : after 」は「擬似要素」と呼ばれるもの１つで、

下記の例のように、

「content 」プロパティと併せて記述することで、

指定した要素の後ろに、content プロパティで指定した文言が追加される。

　EX) 【CSS】

         article {

              width :600px ;

             marigin : 0 auto ;

         }

        section {

              border : solid  #FF0000 ;

             margin : 10px 0 ;

        }

       section:after {

              content : " " ;

              clear : both ;

             display : block ;

        }

      .img-left {

             float: left ;

      }

※赤字部分について

　　clearfix では、「 content : " " ;」として、親要素の最後に空要素を追加し、

　　その空要素を「 clear : both ;」して float を解除している。

※IE7以前のブラウザでは「:after 」は使用できないので、

古いブラウザにも対応させる場合は注意が必要。

◉擬似要素

【CSS】
　　p.giji2:first-line {

　　　　color: #7CFC00;
　　　　font-weight: bold;

　　}　　　

       p.giji3:first-letter {

                  font-size: 2em;
        }


【HTML】
<p class=”giji2″>本日のおすすめは、「伊勢海老のパスタ」です。

獲れたての伊勢海老をふんだんに使用した、自慢の一品です。</p>

<p class=”giji3″>本日のおすすめは、「伊勢海老のパスタ」です。

獲れたての伊勢海老をふんだんに使用した、自慢の一品とです。</p>

【結果】 

本日のおすすめは、「伊勢海老のパスタ」です。

獲れたての伊勢海老をふんだんに使用した、自慢の一品です。

本日のおすすめは、「伊勢海老のパスタ」です。

獲れたての伊勢海老をふんだんに使用した、自慢の一品とです。