clearfix　テスト 備忘録

CSS勉強し始めの時、floatを使っての記述で、ぶち当たったレイアウトの崩れの備忘録です。

分かる人には分かると思いますが、分からない方はスルーでお願いします。/( =＾ｪ＾=)ヽうさ♪

---

これが一番簡単：親要素に指定

overflow: hidden

.clearfix {
/zoom : 1;
}

.clearfix:after {
content: '';
display: block;
clear: both;
height: 0;
}

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

via floatボックスが親ボックスを突き破る問題


via floatでレイアウトが崩れたときの対処