浮動能讓元素脫標,但是不同區域的標籤之間卻又會貼邊,比如:
設計模式li>
ul>
div>
學習方法li>
英語水平li>
面試技巧li>
ul>
div>
body>
html>
顯示效果:
本來應該是兩行現在卻顯示成了一行(貼邊).
這裡有四種方法解決:
1.給浮動的元素的父標籤元素加高度。
有高度的盒子，才能關住浮動
注意:一般情況下不用這一種,因為盒子的內容不確定的時候,盒子的高度也就沒法確定.如果把盒子的高度寫死,那麼內容多了就會撐出盒子.box2
注意:雖然這種方法能清除浮動,但這種方法回事margin失效,因此這種方法用的也少在兩個盒子之間加乙個盒子,並且這個盒子加乙個高,這樣就可以把之前的兩個盒子隔開:
1 class="box1">
2
3 htmlli>
4 cssli>
5 jsli>
6 html5li>
7 設計模式li>
8 ul>
9 div>
10
11 class="cl h16">
div>
12
13 class="box2">
14
15 學習方法li>
16 英語水平li>
17 面試技巧li>
18 ul>
19 div>
1 .cl
4 .h16
1
2 p>
3 p>
4 p>
5 class="cl h10">
div>
6 div>
7
8
9 p>
10 p>
11 p>
12 div>
設定父類標籤的屬性overflow:hidden;也可以清除浮動,但ie6不支援該屬性,要相容ie6就需要這樣寫
1 overflow
:hidden;
2 _zoom:1;
css清除浮動四種方法
清除浮動的本質是清除浮動元素脫離標準流造成的影響。為什麼要清楚浮動？父級沒高度 子盒子浮動了 影響下面布局，我們就應該清除浮動了。清除浮動的四種方法 1.額外標籤法。在最後乙個浮動標籤之後新增乙個額外的塊級標籤，比如空div標籤，設定樣式 2.給浮動標籤的父級元素新增overflow屬性，屬性值設定...
CSS清除浮動的四種方法
浮動能實現網頁排版布局，但是同樣也會給網頁帶來一定的問題 父盒子高度塌陷 下面我們就整理一下幾種清楚浮動的方法 缺點 使用不靈活，後期不易維護 例 child 在浮動元素的後面加乙個空的塊級元素 通常是div 設定該元素clear both 屬性。缺點 結構冗餘 例 child 延續內牆法，利用偽元...
浮動的清除 四種方法
原文 前言 乙個父親不能被自己浮動的兒子，撐出高度。我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最後乙個li了。第二個div中的li，去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度，不能給自己浮動的孩子們，乙個容器。只要浮動在乙個有高度的盒子中,那麼...