利用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)或沒有定義高度,區塊就會隨著資料量延伸