clearfix-5年目の真実-

Web制作を始めて６年以上、
CSSをさわり始めて５年は経つでしょうか。

floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
 <div style="clear: both"></div>

先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。

そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>で過ごしてきました。

というわけで、clearfixについてのメモ。

情報元：norisfactory様

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
/* End hide from IE-mac */


これがclearfixなんですね！
今までずっと<div style="clear: both"></div>を使ってきた私って何なんでしょう！
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。

メモおわり。