clearfixでfloatを解除

Pocket

[css]
.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px; /* IE6,7対策 :afterが使えない*/
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

[/css]

「.」は他の文字でもかまいません。clearはブロックレベル要素にあてることになっているので,display: block;とします。height: 0;とvisibility: hidden; で高さのない表示されない要素にします。

IE6,7は疑似要素 :after をサポートしていません。そこで,「要素の幅か高さを指定した場合,floatした子要素の高さも含めて算出する」というIEのバグを使って,枠や背景が途中で切れる問題を解決します。

 

他、clearfixの参考サイト

floatを解除する手法のclearfix と 次世代のレイアウトの話

スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください