篇文章講了文檔流相關知識，網頁中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的效果一樣，不同之處是，要額外在父級元素中增加一個標簽來做清除浮動。這也就是它的最大缺點。

3、使用 after偽類

使用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等。所以關于本篇了解下就可以了，不需要完全掌握。

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

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

<div class="main">
<div class="nav">xxxx</div>
<div class="">yyyyy</div> <p class="clear"></p></div>

.news{
background-color:gray;
border:solid 1px black;
}
.news img{
float:left;
}
.news p{
float:right;
}
<div class="news">
<img src="/img/news-pic.jpg" alt="my picture" />
<p>some text</p>
</div>

.news{
background-color:gray;
border:solid 1px black;
}
.news img{
float:left;
}
.news p{
float:right;
}
<div class="news">
<img src="/img/news-pic.jpg" alt="my picture" />
<p>some text</p>
<br class="clear" />
</div>