子區塊Float造成的困擾

設計版面時常常會遇到的情況,就是用來包覆float子區塊的父區塊無法跟隨子區塊高度一併延伸

一、原因

使用css設計版面時常常會遇到的情況之一,就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸

二、解決方式(一):新增clear:both

增加具有clear:both設定的div元素,在float子區塊後面來清除Float效果,讓父區塊可以成功的包覆子區塊

三、解決方式(二):父區塊設定overflow:hidden的屬性

(1)父區塊設定overflow:hidden的屬性

(2)原因overflow屬性原本是用來控制當內容超出顯示範圍時,是否出現捲軸效果的屬性

(3)overflow:hidden,也就是為內容嵌入顯示捲軸的顯示區域,但視情況顯示捲軸

End