利用float並排區塊時,當區塊的高大於父區塊的高時,常會遇到父區塊無法自動延展的狀況

例如
CSS

div{ border:1px solid #000; }
#content{ width:650px; min-height:200px; }
#div1{ width:200px; min-height:100px; float:left; margin-right:10px; }
#div2{ width:200px; min-height:100px; float:left; margin-right:10px; }
#div3{ width:200px; min-height:100px; float:left; }

HTML

<div id="content">
	<div id="div1">123</div>
	<div id="div2">123.......更多資訊</div>
	<div id="div3">456</div>
</div>

解決的方法就是在#content加入overflow:hidden。
hidden的意思是內容嵌入顯示區域,如果設定了高度,當資料量超過區塊時捲軸不會出現(多出來的資料會隱藏)。反之若定義最小高度(min-height)或沒有定義高度,區塊就會隨著資料量延伸

Categories: CSS