這一章主要總結解除浮動，在這之前的先提一下定位。
1.定位
提到定位應該先了解兩個知識點：
1.相對定位
相對定位是指相對于自己以前在标準流中的位置來定位。
這裡注意，相對定位并沒有脫離标準流，會繼續在标準流中占有空間。
同時也要想到，既然沒有脫離标準流，就意味着會占用标準流的位置，也意味着可以給相對定位的元素設定margin/padding等屬性，同時會影響到标準流的布局。
2.絕對定位
絕對定位是相對于祖先元素或者body來定位，是相對于一個公共基準。當以body時，參考點是網頁首屏，并不是整個網頁。（預設情況下都是以body作為參考點）
這裡順帶提一下網頁首屏：在我看來，網頁首屏是指打開一個網頁我們第一眼看到的那個界面
- 不同于相對定位，絕對定位是脫離于标準流的，是以并不會在标準流中占位置。
- 是以，絕對定位不區分塊級元素/行内元素/行内塊級元素
- absolute設定的絕對定位會從父元素開始向上直系查找(定位流中的父元素！即非static定位的元素)，直到html,這裡要知道，html和body在位置上是有差別的
- 當有多個可選父元素時，會優先選擇最近的，就近原則
2.解除浮動
盒子是具有高度的，在标準流中盒子的搞對會被内容高度撐起來
但是浮動流中浮動的内容不會撐起盒子的高度
解除浮動的原因是：相鄰的盒子之間，如果前面的盒子沒有高度，那麼後面盒子中的浮動元素就會去找前面的浮動元素，這就導緻了界面的混啦，是以，我們需要在必要的時候清除浮動
1.給前面的盒子設定高度
1 <head>
2 <title>清除浮動</title>
3 <meta charset="utf-8"/>
4 <style>
5 .test1{height: px;}
6 li{float: left;text-align: center;letter-spacing: px;}
7
8 </style>
9 </head>
10 <body>
11 <div>
12 <p>清除浮動</p>
13 </div>
14 <div style="color:red;" class="test1">
15 <P>RED</P>
16 <ul>
17 <li>
18 one
19 </li>
20 <li>
21 two
22 </li>
23 <li>
24 three
25 </li>
26 </ul>
27 </div>
28 <div style="color:green;" class="test2">
29 <P>green</P>
30 <ul>
31 <li>
32 AAA
33 </li>
34 <li>
35 BBB
36 </li>
37 <li>
38 CCC
39 </li>
40 </ul>
41 </div>
42 </body>
但是，高度設定在正常使用中一般不會強制去寫
是以這種方法一般不是經常使用的
忽略前後的字元間距。這裡主要看的是green,在沒設定高度的時候，green被合并到前面的盒子裡了。
2.外牆法
我們可以使用clear:both;清除前面浮動元素對浮動的影響
而外牆法是指在兩個塊級元素之間添加一個額外的塊級，并為其定義clear:both樣式
這種是可以使用margin屬性的，但是會産生無意義的标簽，是以考慮使用。
<head>
<title>清除浮動</title>
<meta charset="utf-8"/>
<style>
.test1{height: px;}
li{float: left;text-align: center;letter-spacing: px;}
.test4{color:red;}
nav li{width: px;height: px;text-align: center;padding-top: px;float: left;}
li{list-style: none;margin: px;padding: px;}
ul{width: auto !important;list-style: none;margin: px;padding: px;}
</style>
</head>
<body>
<DIV class="test3">
<UL class="nav">
<LI class="nav_icon1" style="cursor: pointer;" onclick="window.open('../','_self')"><SPAN>1首 頁</SPAN></LI>
<LI class="nav_icon2" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/xxgk/','_blank')"><SPAN>2公開</SPAN></LI>
<LI class="nav_icon3" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qkhome/','_blank')"><SPAN>3服務</SPAN></LI>
<LI class="nav_icon4" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/hdjl/','_blank')"><SPAN>4交流</SPAN></LI>
<LI class="nav_icon5" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/qkxw/','_blank')"><SPAN>5新聞</SPAN></LI>
<LI class="nav_icon6" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/qkgk/','_blank')"><SPAN>6流動</SPAN></LI>
</UL>
</DIV>
<div style="clear:both;"
<DIV class="test4">
<UL class="nav">
<LI class="nav_icon1" style="cursor: pointer;" ><SPAN>1首 頁</SPAN></LI>
<LI class="nav_icon2" style="cursor: pointer;" ><SPAN>2公開</SPAN></LI>
<LI class="nav_icon3" style="cursor: pointer;" ><SPAN>3服務</SPAN></LI>
<LI class="nav_icon4" style="cursor: pointer;" ><SPAN>4交流</SPAN></LI>
<LI class="nav_icon5" style="cursor: pointer;" ><SPAN>5新聞</SPAN></LI>
<LI class="nav_icon6" style="cursor: pointer;" ><SPAN>6流動</SPAN></LI>
</UL>
</DIV>
</body>
仔細看我們會發現，第二個浮動找向第一個浮動了，當我們添加了
<div style="clear:both;"/>
後，浮動就斷了
4.内牆法
内牆法的特點在于在前面最後一個盒子，或者說要與後面隔開的盒子後面加入一個盒子。
<div>
<UL class="nav">
<LI class="nav_icon1" style="cursor: pointer;" ><SPAN>1首 頁</SPAN></LI>
<LI class="nav_icon2" style="cursor: pointer;" )"><SPAN>2公開</SPAN></LI>
<div style="clear:both;"/>
</UL>
</div>
<div>
<p>後面的浮動</p>
</div>
如代碼所示，内牆法的主要特點在于清除浮動的盒子被放到是一個盒子裡面了。
5.給前面的盒子加入overflow:hidden
overflow:hidden用于清除溢出盒子之外的内容，但是同時因為會觸發BLOCK FORMATTING CONTEXTS,是以亦清除了浮動
方法：前面的盒子的CSS元素中加入屬性overflow:hidden
缺點：會和定位産生沖突。
6.添加僞元素
這種方法就有的提了
因為要去介紹什麼是僞元素。。。
這裡用一個新的文章去解釋。
http://blog.csdn.net/zzg19950824/article/details/78156051
方法有兩種：
給前面的元素加上一個after僞元素
給前面的元素加上雙僞元素：after和before
下面貼上代碼就明白了
這兩段代碼的意思給類名為test3的代碼塊添加僞元素，因為僞元素除了不會在文檔中生成，具有和正常元素相同的作用，是以裡面的屬性設定同樣生效了。
其中的幾項設定是為了讓僞元素的存在不會影響原有盒子的形狀高度。
總結：
至此清除浮動的幾項方法就總結的差不多了，方法有很多，盡量選擇不會影響到其他元件的方法。