上篇文章講了文檔流相關知識，網頁中html元素會按照标準規則排列，塊級元素從上到下，行内元素從左到右排列。如果這時想讓一個元素排到右側，怎麼辦？

這時就可以使用浮動float 和 定位 position ，今天主要介紹float，關于float屬性稍微有點難理解，它是把雙刃刀，會用的會做出各種很好的效果，不會用的反而問題越來越多。

float 屬性有以下幾個值：

1. none —— 沒有浮動（默認值）。
2. left —— 左浮動。
3. right —— 右浮動。
4. inherit —— 繼承父元素的float。

如下示例：

左浮動

右浮動

這裡注意：右浮動是從右到左排列元素，子元素的html實際位置是按照，子元素1>子元素2>子元素3的順序，但是右浮動的顯示效果是子元素1在最右邊，依次向左，正好和元素實際位置相反。

float 浮動可歸納以下幾點：

1. 浮動本意是什麼？
2. 使元素脫離文檔流，但不脫離文本流。
3. 會使父元素高度塌陷。
4. 浮動和行内元素區别。
5. 浮動的破壞性，影響相鄰元素的布局。
6. 如何清除浮動。

浮動float最初設計的目的是實現文字環繞的功能，如下圖所示：

沒有使用浮動：

使用浮動後：

從上圖看到圖片脫離了文檔流浮動到左邊，但是沒有脫離文本流，文本環繞着圖片。

文字環繞效果除了float屬性能夠實現，再找不到其它方法，這就是它的真正用處，但是在早期網頁制作中，它被用來實現各種布局，比如水平的菜單，或者左邊圖片右邊文字等等效果。但是在使用float的過程中出現了各種問題，比如父元素高度塌陷，破壞相鄰元素的布局等等。

當一個元素裡面的子元素使用了float浮動，其父元素如果沒有設置高度或者高度小于浮動元素的高度時，父元素就會出現如下示例：

沒有使用浮動：

使用浮動後：

如上圖紅色邊框就是父元素，沒使用float前，它的高度被子元素撐開。當使用float後可以看到父元素的高度變成0了，這就是高度塌陷。

float 浮動可以使一個行内元素變成塊級元素，準确地說應該更像是 inline-block 行内塊級元素，但又不完全一樣。看下如下示例：

沒有使用float前：

子元素是一個塊級元素，占滿了一行，其寬度默認為100%。

使用float後：

可以看到，子元素的寬度變了，等于其内容的實際寬度。和行内元素一樣，但是不同之處就是浮動可以使元素浮動到左側或者右側，如上圖。行内元素則不行，隻能從左到右排列，這就是float的特殊之處，所以常常被用來制作一些複雜的布局效果。

float雖然能夠解決一些布局的問題，但是用不好就會造成頁面布局混亂，出現各種奇怪的問題，如下示例：

沒有使用float前：

如上圖，所有元素從上到下排列，父級那個元素和上下相鄰。

使用float後：

此時可以看到，父級那個元素下面的相鄰元素2，由于父級元素高度塌陷，也向上移動位置，這樣導緻浮動元素就會覆蓋下面的相鄰元素2，這不是我們期望的結果。

怎麼解決了？要麼給父級元素設置一個固定的高度，這個高度要大于浮動元素的高度，或者使用clear屬性清除浮動。

為了解決浮動造成的破壞，此時就要使用各種方法來清除浮動，常見的有以下三種方法：

1、給浮動元素父級元素使用 overflow

如下示例：

overflow:hidden; zoom:1;

可以看到父級元素的高度不塌陷了，被子元素撐高了。由于沒有設置高度，其高度等于子元素的高度。

overflow 的缺點就是，當子元素寬度和高度超出父級時，會隐藏部分子元素内容。

在早期為了兼容ie浏覽器，除了使用overflow：hidden；還要加上zoom：1；否則會出現一些怪異的現象。

2、使用clear屬性

clear 屬性用來是一個元素不受相鄰浮動元素的影響，它有 both （清除左右浮動），left（清除左浮動），right（清除右浮動），none （允許其相鄰元素有浮動，默認值）。

如下示例：

clear：both；

看到這裡和使用overflow的效果一樣，不同之處是，要額外在父級元素中增加一個标簽來做清除浮動。這也就是它的最大缺點。

使用after僞類，可以不用額外增加一個多餘的标簽，如下示例：

.fix:after{ display:block; content:''; clear:both; line-height:0; }

綜上所述，方法3是最後的。以上三種方法都是解決父級高度塌陷問題，還有一種情況就是給相鄰元素2設置clear 屬性，會是什麼效果？

如下示例：

<div class="d2" style="clear:both;"> 相鄰元素2 </div>

如上圖看到相鄰元素2，恢複到默認文檔流中的位置，但是發現父級元素的高度仍然塌陷，這種清除浮動的情況是比較特殊的，和之前的不一樣。

float 是不是有點難懂，沒辦法浮動的初衷就不是用來布局的，被玩壞了。但是不要緊，float在如今網頁布局中已經很少使用，css3已經有了新的方案，比如flex等。所以關于本篇了解下就可以了，不需要完全掌握。

感謝閱讀，歡迎指出錯誤或者補充。

上篇：前端入門——網頁中的文檔流和布局

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!