« clearfixのバリエーション | メイン | チェックボックスから特定の数だけチェック、パラメータをリンク先に渡す »
2007年8月19日
clearfix：overflowを使用した解決方法
clearfixであれこれ調べているうちに、overflowを使った方法でfloat問題を解決した方法がありました。
QuirksModeというサイトのClearing floatsという記事に紹介されていた方法。
日本語でも下記のサイトで紹介されていました。
ただし・・・MacIEで問題が生じるそうなのですが、現在テスト環境が無いので確認できず。
Netscape7.1でも中身が表示されないなどの問題が生じると記載されているサイトがあるのですが、overflow: hidden;と記述した場合、Windows用Netscape7.1版では問題なく表示されました。
Mac OS Classic (OS 8 & 9) 用Netscape7.02 版でのことでしょうか？
元ネタの記事からそのままソースを拝借
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
MacIE対応、Netscape7.1対応も含めて下記の通りに。
/* for modern browser */
.clearfix {
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 1px;
clear: both;
overflow: hidden;
}
/* Hides from IE-mac \*/
* html #container {
height: 1em;
overflow: visible;
}
/* End hide from IE-mac */
.clearfix {
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 1px;
clear: both;
overflow: hidden;
}
/* Hides from IE-mac \*/
* html #container {
height: 1em;
overflow: visible;
}
/* End hide from IE-mac */
投稿者 lepracaun : 2007年8月19日 05:28
トラックバック
このエントリーのトラックバックURL:
http://www.lepracaun.info/mt4/mt-tb.cgi/66
