問題與解決辦法
一、問題引發思考
今天在工作遇到一個很奇妙的問題,使用了clear:both始終無法消除浮動視窗所帶來的不確定div大小,後來在網路上找到了修改overflow這個方法,效果非常好!! 以下為方法來自於mr.mu studio
在使用css設計版面時我們常常會遇到的情況之一,就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸:
而通常我們要解決這種情況,我們會增加一個具有 clear 屬性的元素 (例:具有clear:both設定的div元素) 在float子區塊後面來清除Float效果,讓父區塊可以成功的包覆子區塊:
但是你知道嗎?其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢,overflow屬性原本是用來控制當內容超出顯示範圍時,是否出現捲軸效果的屬性,它的預設值是visible,也就是讓內容完全顯示出來,不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto,也就是為內容嵌入顯示捲軸的顯示區域,但視情況顯示捲軸。(請google以獲得更多overflow的詳細使用方式)
當我們為父區塊設定overflow:auto的屬性後,我們就不需額外去clear掉float的效果了:
本文章內容轉載於
http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/