構造のマークアップなしでフロートをクリアする方法
1 月 20th, 2009
スポンサードリンク
前回も書きました、フロートをクリアする裏技(笑)、clearfix技ですが、もう一つ紹介しておきます。Tony Aslett氏が考え出した書き方とのこと。これは便利!是非お使い下さい(笑)
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Filed under CSS, Dreamweaver, Tips, Web全般, てるよし, メモ | Comment (0)
便利なclearfix
10 月 1st, 2008
スポンサードリンク
ボックスをfloatさせた後、回りこみがおかしくなったりmarginが効かなくなったりと、あれこれとややこしいfloatの解除。そこで登場する、便利なcssがこのclearfix。有名なので是非活用されたし。使い方は、clearしたい親要素に下記のCSSを適応するだけ。(クラス名は適当になにか付けて下さい)
.clrfix:after {
content: ".";
display: block;
visibility: hidden;
height: 1%;
line-height: 0;
clear: both;
margin-bottom:15px;
}
IE7はこれに対応していないので、IE7用に下記を指定。
*:first-child+html .clrfix{
display: inline-block;
zoom: 100%;
margin-bottom:15px;
}
個人的に使い勝手がいいのと思うのは下記のソース。だいたいはこちらのほうで問題ありませんでした。
.entry {
overflow: hidden;
}
.entry:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html .entry {
height: 1em;
overflow: visible;
}
/**/
clearfixは他にも色々な亜種も存在しますので、一番使いやすいものを使用するのがいいカモ。
Filed under CSS, メモ | Comment (0)










































