clearfixについて調べてみた

0
    floatを解除する方法として有名な、clearfixですが
    今ままでは何気なくおまじない程度に使っていたんですがその中身について調べてみました。



    floatを使った場合、親要素が高さを失い潰れてしまいます。それを回避するためにfloatを指定した要素の後にclear:bothをかける必要があるのですが、それができない場合にclearfixを使います。
    clearfixとは「floatした要素が親要素からはみ出してしまうのを回避する」ためのものです。
    CSSの:after擬似要素を利用してclearします。


    現在使っているclearfix
    .clearfix:after {    //clearfixという要素の直後に
    content: ".";        //.を追加
    display: block;     //block要素にし
    height: 0;           //高さを0に
    clear: both;         // floatの解除
    visibility: hidden; //それらを表示しない
    }
    こんな感じらしいです。

    調べてわかったんですけどその他いろいろな書き方が有るみたいですね、
    現在のブラウザに適したとても短い書き方のものも有りました。
    もうちょっと勉強してそっちの方を使ってみたいなーと思っております。


    とにかくclearfixを考えたオーストラリア人のTony Aslett氏は天才ですね。
    おれもいつかこんなこと考えれるようになりたいです。

           
    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
    << December 2018 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode