問題與解決辦法
一、問題引發思考
今天在工作遇到一個很奇妙的問題，使用了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/
沒有留言:
張貼留言