1. 程式人生 > >li浮動引起ul高度坍陷的解決方法

li浮動引起ul高度坍陷的解決方法

我們都知道float在CSS中的作用是使元素脫離正常文件流並使其移動到其父元素的“最左邊”或者“最右邊”。元素浮動之後,它脫離當前正常的文件流,所以無法撐開其父元素,造成父元素高度塌陷。

解決方法:
一、直接ul新增高度

ul{
    height: 40px;
}

二、ul新增樣式zoom:1;(只對IE有效)

ul{
    zoom: 1;
}

三、ul新增樣式overflow: hidden;zoom: 1;

ul{
    overflow: hidden;
    zoom: 1;
}

四、在最後一個li後加上一個div,div加上clear:both的樣式

<li>第四名</li>
<div style="clear: both;"></div>