浮動和定位是CSS

布局當(dāng)中很重要的兩種方法，這一篇先講浮動布局，定位留在下一篇。

一、先說說浮動的性質(zhì)吧，請看HTML代碼：

相應(yīng)的CSS代碼：

部分截圖如下：

總結(jié)得出浮動元素的性質(zhì)：

1. 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
2. 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個（實例中為父元素）任意非浮動元素靠齊
3. 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊

        元素設(shè)置為浮動之后，就生成一個塊級框（css行高提出的概念），沒必要再聲明display:block，可以設(shè)置寬高。

請單擊查看Demo

二、接下來細說浮動的幾個規(guī)則。

1、浮動規(guī)則1：

        浮動元素的左（右）外邊界不超出其包含塊的左（右）內(nèi)邊界

HTML代碼：

相應(yīng)CSS樣式：

由于圖片較大，不截圖了，請單擊查看Demo

2、浮動規(guī)則2：

        浮動元素的左（右）外邊界必須是源文檔中之前出現(xiàn)的左（或右）浮動元素的右（左）外邊界，除非后出現(xiàn)的浮動元素的頂端在先出現(xiàn)的浮動元素的底端下面

防止浮動元素彼此覆蓋，保證所有浮動對象都可見。但是定位卻容易導(dǎo)致元素覆蓋！

同樣請看源碼：

CSS樣式：

請單擊查看Demo

3、浮動規(guī)則3：

        左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊；右浮動元素的左外邊界不會在其左邊任何左浮動元素的右邊界的左邊。

防止第二個浮動元素與第一個浮動元素有重疊區(qū)域。

HTML結(jié)構(gòu)：

樣式：

請單擊查看Demo

4、浮動規(guī)則4：

        一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高。如果一個浮動元素在兩個合并外邊距之間，放置這個元素時就好像在兩個元素之間有一個塊級父元素。

假如有三個段落，中間段落浮動，浮動段落會像有一個塊級父元素（如div）一樣浮動，能防止浮動段落一直向上移動到三個段落共同的父元素頂端

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

5、浮動規(guī)則5：

        浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。

防止浮動元素彼此覆蓋，保證所有浮動對象都可見。但是定位卻容易導(dǎo)致元素覆蓋！

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

6、浮動規(guī)則6：

        如果源文檔中一個浮動元素之前出現(xiàn)另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

進一步限制元素的向上浮動

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

7、浮動規(guī)則7：

        左（右）浮動元素的左（右）邊有另一個浮動元素，前者的右外邊界不能在其包含塊的右（左）邊界的右（左）邊，即浮動元素不能超出其包含元素的邊界，除非它太寬本身無法放下。

如果沒有足夠的空間，浮動元素會被"擠"到新行上。

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

8、浮動規(guī)則8：

        滿足其他約束條件時，浮動元素必須盡可能高的放置。

浮動元素的頂端應(yīng)當(dāng)與其標(biāo)記所在的行框（行高中提出的概念）的頂端對齊。

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

9、浮動規(guī)則9：

        浮動元素必須盡可能朝著所浮動的方向向父元素內(nèi)邊距靠近，且位置越高，靠近的程度越大。

HTML結(jié)構(gòu)：

風(fēng)格：

請單擊查看Demo

三、下面講講清除浮動吧

        當(dāng)一個父的盒子包含浮動的子元素時，為了讓父元素完全顯示（或者說高度自適應(yīng)），這時候我們需要清除浮動。下面歸納四種辦法實現(xiàn)。

HTML結(jié)構(gòu)：

風(fēng)格：

由此總結(jié)出清除浮動的辦法：

1. 給父元素設(shè)置浮動；
2. 對父元素使用溢出隱藏的辦法；
3. 對父元素使用:after偽對象實現(xiàn)；
4. 空標(biāo)簽法。

請單擊查看Demo

四、最后再說一說浮動元素與非浮動元素混合布局時，它們的重疊順序：

假設(shè)有如下HTML代碼：

風(fēng)格：

結(jié)論：與浮動元素重疊時的布局：

1. 行內(nèi)框與一個浮動元素重疊時，其邊框、背景和內(nèi)容都在該浮動元素"之上"顯示
2. 塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素"之下"顯示，只有內(nèi)容在浮動元素"之上"顯示

請單擊查看Demo

五、浮動元素的居中

        還有就是關(guān)于浮動元素的居中問題，這里限于篇幅，不再贅述，請擴展閱讀："實現(xiàn)浮動后的li元素居中"以li元素的居中為例講解如何實現(xiàn)浮動元素居中，推薦使用相對定位法實現(xiàn)。