1. 程式人生 > >css之子元素浮動導致父元素高度塌陷解決方案

css之子元素浮動導致父元素高度塌陷解決方案

問題引入:在製作導航欄時,若父元素ul不給出高度的具體數值,只給背景。而子元素li又用到了float:left。

那麼,這種情況就會導致父元素的背景“消失”,因為浮動元素脫離文件流,不佔據空間,因此相當於父列表沒有內容。

解決方案:

一:新增進行清理浮動的元素(但書中說,這會在頁面中增加不必要的標記,不建議用這種方法)。

二:

(1)使父元素也新增float

(2)使父元素posation:absolute

(3)使父元素display:inline-block

三:

(1)父元素overflow:hidden

(2)父元素使用zoom

點選開啟連結   知識點就是從這兒總結的,

日後會慢慢深入學習,儘量弄懂其中的具體原理。