css之子元素浮动导致父元素高度塌陷解决方案

来源:互联网 发布:mac office 2016 编辑:程序博客网 时间:2024/04/30 15:08

问题引入:在制作导航栏时,若父元素ul不给出高度的具体数值,只给背景。而子元素li又用到了float:left。

那么,这种情况就会导致父元素的背景“消失”,因为浮动元素脱离文档流,不占据空间,因此相当于父列表没有内容。

解决方案:

一:添加进行清理浮动的元素(但书中说,这会在页面中增加不必要的标记,不建议用这种方法)。

二:

(1)使父元素也添加float

(2)使父元素posation:absolute

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

三:

(1)父元素overflow:hidden

(2)父元素使用zoom

点击打开链接   知识点就是从这儿总结的,

日后会慢慢深入学习,尽量弄懂其中的具体原理。

0 0
原创粉丝点击