floatを無駄なくスマートに解除するCSS、clearfix
更新日：2015年9月5日
ページをレイアウトする際に今では欠かせないCSS、それはfloatです。
floatなんて一切使わずに全てtableでレイアウトしているサイトも中にはありますが、それらはかなり昔に作られたサイトであることがほとんどでしょう。CSSがまだ登場していない時代ではtableで無理くりにレイアウトするしかなかったのです。
そんな今では欠かすことの出来ないfloatですが、解除の方法にお悩みの方は沢山おられることかと思います。
空の<div>を作り、その<div>にclar: both;を指定すれば簡単に解除することが出来るのですが、どうもスマートじゃない。そもそも空の<div>を設置するのが美しくないと感じる方も少なくないのではないでしょうか？
そんな皆さんに無駄な要素を設置することなく、floatを無駄なくスマートに解除する方法をご紹介します。
それはCSSのclearfixを使うことです。
HTMLは例えば以下のように記述します。
左側に設置されているコンテンツです。右側に設置されているコンテンツです。
CSSは以下のように記述です。
#contents {
width: 700px;
}
#leftcontents {
float: left;
width: 500px;
margin-right: 10px;
}
#rightcontents {
float: left;
width: 190px;
}
#contents:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
HTML、CSS共によくある記述ですが、ポイントは#contents:afterです。
何をしているのかというと、:afterという擬似要素を使って空のブロック要素を生成し、その要素にclar: both;を指定して、floatを解除しています。
このようにclearfixを使えば空の<div>を作らずとも、CSSの記述のみでfloatの解除をすることが出来ました。
要素は確かに存在しているのですが、擬似要素の為、HTMLソースに表れませんし、ソースが汚れません。
いかがでしたでしょうか？
clearfixは便利です。是非お試し下さい。
