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

我們都知道float在css中的作用是使元素脫離正常的文件流並使其移動到其父元素的「最左邊」或「最右邊」。元素浮動之後，它脫離當前正常的文件流，所以無法撐開其父元素，造成父元素的高度塌陷。如下的**就是li向左浮動後，ul高度坍陷，所以border就顯示為一條線。**、效果如下：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>li浮動引起ul高度坍陷的解決方法
title
>
6<
style 
type
="text/css"
>7*
1314
ul19
li22a33
a:hover
3738
.clearfix 
41.clearfix:before, .clearfix:after 
46.clearfix:after 
49style
>
50head
>
51<
body
>
52<
ul>
53<
li>
54<
a href
="##"
>首    頁
a>
55li
>
56<
li>
57<
a href
="##"
>新聞資訊
a>
58li
>
59<
li>
60<
a href
="##"
>產品展示
a>
61li
>
62<
li>
63<
a href
="##"
>售後服務
下面我們就來看一下float浮動因起此問題的幾種解決方法：
1、最直接簡單的方法就是給ul加乙個高度。
1

ul
2、在最後乙個li後加上乙個div，給div加上clear:both的樣式。

1

<
li>
2<
a href
="##"
a>3li
>
4<
div 
style
="clear:both;"
>
div>
3、給ul加上overflow: hidden;zoom:1;的樣式。

1

ul
4、給ul加class="clearfix"的樣式。

1

.clearfix 
4.clearfix:before, .clearfix:after 
9.clearfix:after 
以上任意一種方法，都可以解決此問題。
 
CSS網頁製作技巧 ul的li高度不相容問題
在頁面中有時候使用ul li列表時ie6 ie7 ie8 ff的高度會不一樣 其中ie6與ie7高度一樣，ie8與ff高度一樣 設定高後使用 overflow hidden 也無濟於事，這個問題一直困擾著我，以至於我後來只能使用div來做列表，但是這樣只能說是對付上的，但沒從實際上解決這個問題。後來...
HTML CSS解決ul和li的錯位 換行問題
這篇部落格主要是講如何解決ul和li的一些問題，作為乙個css大白，作者最近再做乙個非常簡單的導航欄 乙個ul中套4個li，一行 的時候遇到了很多問題。下面將一一講述。問題如下 1.ul中的li如何橫向排序？2.display inline inline block block有什麼區別？3.為何分...
IE6 7中li浮動外邊距無法撐開ul的解決方法
昨天群裡有人提出了這樣的問題 為什麼在現代瀏覽器 谷歌 火狐 ie8 9 中顯示是這樣的 而在ie6 7中卻是這樣 遇上這種盒裝模型撐不開的情況，我第一時間想到的是給父容器加overflow hidden。但是，他上面已經加了。那是什麼原因呢？原因可能出在浮動上面，因為ie6 7對浮動的解析不同導致...