浮動佈局知多少

從流式佈局到flex佈局，css中的各類佈局模式爲開發提供了諸多便利，這篇文章是對浮動佈局相關內容的總結。

何爲浮動佈局

在寫前端頁面時，經常會遇到多個div須要並排顯示的狀況，多是購物網站相鄰的商品模塊，亦或者是電影資訊網站的新聞信息，浮動（float）就是讓塊級元素並排顯示的一種有效的解決方案。

可是有趣的是，浮動在創造之初，其設計本意並非實現塊級元素並列。它是爲了字圍效果而誕生的，相似於咱們在基礎電腦課學word時必學的文本環繞圖片效果。浮動陰差陽錯地成爲了咱們極爲經常使用地佈局模式，可謂造化弄人（笑）。

基本浮動效果

首先看一個最基本的浮動案列

.a{
    width: 240px;
    height: 240px;
    background-image: url("../img/1.jpeg")
}
.b{
    width: 240px;
    height: 240px;
    background-image: url("../img/2.jpeg")
}
複製代碼

因爲div爲塊級元素，因此它們垂直一列顯示。

給a加入float：

float:left;
複製代碼

看看效果：

？？小b怎麼消失了？？

浮動解釋

咱們把兩個div的父元素看做是一個國家，兩個div都是這個國家的公民，當爲小a設置了浮動以後，就至關與小a出國旅行了，咱們稱之爲脫離標準文檔流（但浮動並未徹底脫離標準文檔流），由於小a已經再也不本國疆域以內，因而乎還在國內的小b會前移，頂上去，與小a的位置重疊，因此咱們就看不見小b了。

爲某一元素設置浮動後，它先向上移動，直到貼靠到父元素的邊界，若是是左浮動，就再向左移動直到父元素的左邊界；若是是向右浮動，就再向右移動直到父元素的右邊界，後面的其餘元素會排上來。

高度塌陷

浮動雖然用起來很happy，可是會產生一個很嚴重的問題————父元素高度塌陷。

父元素高度塌陷會發生在沒有設置高度且子元素所有浮動的父元素裏。

仍是剛纔的小a和小b，咱們給他們兩個都設置一下浮動：

.a{
    width: 240px;
    height: 240px;
    background-image: url("../img/1.jpeg")
    float:left;
}
.b{
    width: 240px;
    height: 240px;
    background-image: url("../img/2.jpeg");
    float:left;
}
複製代碼

效果以下：

父元素的高度沒有了！！！

解決辦法

高度塌陷的成因很好理解，小a和小b都出國了，父元素中空無一人，因爲沒有設置高度，其高度默認自適應，因此變爲0。高度塌陷會爲開發帶來諸多不便，有如下辦法能夠解決此問題：

• 爲父元素設置高度
• 爲父元素設置overflow:hidden
• 父元素浮動，也不會產生塌陷
• 在子元素後面加一個空的div，並未這個空div設置clear:both

最後一種方法能夠用僞類實現，簡單高效又優雅，即提早寫好僞類

.clear:after{
    content=""; 
    display:block; 
    clear:both; 
    height:0; 
    overflow:hidden;
}
複製代碼

須要時隨時調用便可。

浮動的其餘細節

變性手術？？

若是對一個行內元素設置浮動，該行內元素會自動變爲塊級元素。

引入新的小c

<span class="c">
</span>
複製代碼

.c{
    width: 480px;
    height: 480px;
    background-image: url("../img/03.jpeg");
    float: left;
}
複製代碼

成功變身塊級元素！！

浮動產生的包裹性

一個浮動的塊級元素，若其未設置寬度，它的寬度會盡量小，小到正好完美包裹住內容。

洋裝雖然穿在身，我心依然是中國心

前面提到過，浮動並未徹底脫離標準文檔流，如同出國旅遊但並未改變國籍的公民同樣，浮動的元素依然受父元素控制。

父元素寬度改變會對浮動元素產生影響，當減小父元素寬度時，浮動的子元素會往一邊「擠」，浮動的子元素寬度不變。

總結

本文對浮動進行了簡要的總結，也是本人學習過程的心得，但願對讀者有所幫助。