Memorandum
BookCSS / CSS3float

CSSで段組み作成する場合の基本の基本、「float」についてメモる。
調べれば星の数ほどでてくることなので、説明は特に無しでいきます。
例えば、

<div class="parent-div">
	<div class="child-div"></div>
	<div class="child-div"></div>
</div>

.parent-div{
	clear: both;
	}
	.child-div{
		float: left;
		}

の場合、child-divクラスの高さが、parent-divクラスに計算されませんので、ほぼ高さのないdivになってしまいます。こういう場合、CSSハックなどで対処できます。
親要素のdivに以下のクラスを追加し、

<div class="parent-div clearfix">
	<div class="child-div"></div>
	<div class="child-div"></div>
</div>

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

こうすることで、子の高さを計算して親要素に反映してくれます。

ついでですが、CSSハックで対処するのが定石だと思っておりましたが、最近、overflowでも対処できることに気づきましたので一応書いておきます。

<div class="parent-div">
	<div class="child-div"></div>
	<div class="child-div"></div>
</div>

.parent-div{
	clear: both;
	_zoom: 1;  
    overflow: hidden; 
	}
	.child-div{
		float: left;
		}

_zoomとoverflowの指定をすることで、同じ処理ができるようです。