備忘録：ClearFix

CSS

http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html
http://css-happylife.com/log/css-hack/000078.shtml
FloatをFloatした要素内で解除するための「clearfix」。自分用に一言でまとめる。
●CSS（clearfix）



.clearfix:after {

	content:".";

	height:0px;

	clear:both;

	display:block;

	visibility:hidden;

}

/*IE7,MacIE用*/

.clearfix {

	display:inline-block;

}

/* Hides from MacIE \*/

 * html .clearfix {

	height:1%;

} 

.clearfix:after {

	display:block;

} 

/* Hides from MacIE END */


●XHTML例



<div class="clearfix"><!-- 親要素 -->

	<p class="floatRight">右に回りこむ要素</p>

	<p>回り込まれる要素</p>

</div>

よーするに「親要素の範囲で回り込みを留める」ってこと。基本的に大枠の入れ子はクラスでなく直接定義すること。
もうフッタ自身でclear:bothとか、上の尻拭とかしない。IE7はafter効かないとか、IE6から退化している意味がワカラン。



しかし久々に見たら、他所参考にしただけあってここのCSSもｇｄｇｄ杉だ。はてダの独自構造なんて把握する気も起きないけどさ。