CSS 浮動(Float) 清除浮動

說浮動以前，先說一些別的東西

標準文檔流

宏觀地講，咱們的web頁面和photoshop等設計軟件有本質的區別：web頁面的製做，是個「流」，必須從上而下，像「織毛衣」。而設計軟件，想往哪裏畫個東西，都能畫
標準文檔流的特性
1.空白摺疊現象(不管多少個空格、換行、tab，都會摺疊爲一個空格)
2.高矮不齊，底邊對齊
3.自動換行，一行寫不滿，換行寫

行內元素和塊級元素

行內元素和塊級元素的區別：(很是重要)
行內元素

• 與其餘行內元素並排；
• 不能設置寬、高。默認的寬度，就是文字的寬度

塊級元素

• 霸佔一行，不能與其餘任何元素並列
• 能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%

塊級元素和行內元素的相互轉換
咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換

• display:inline;能夠把塊級元素轉換爲行內元素
• display:block;能夠把行內元素轉換爲塊級元素

再說一個：display:inline-block;能夠把行內元素或塊級元素設置爲 行內塊元素 ，能夠並排顯示，而且能夠設置塊級元素的屬性

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：脫離 標準文檔流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• 浮動
• 絕對定位
• 固定定位

浮動(float)

float:left | right | none ;(默認不浮動none)

浮動的元素脫標

• 在一個父元素內部，若是一個元素浮動了，那麼它就脫離了標準文檔流，後面的元素就讓向上排
• 浮動並無徹底地脫離了標準文檔流（可是它具備破壞性，因此能夠用Flex佈局，想了解Flex佈局，請參考個人 Flex佈局教程），若是後面的元素內部有文字，這些文字會環繞在浮動元素的周圍，產生字圍效果

上圖中，在默認狀況下，兩個div標籤是上下進行排列的。如今因爲float屬性讓上圖中的第一個div標籤出現了浮動，因而這個標籤在另一個層面上進行排列。而第二個div還在本身的層面上聽從標準流進行排列。

一旦一個元素浮動了，那麼，將可以並排了，而且可以設置寬高了。不管它原來是個行內元素，仍是塊級元素

浮動的元素互相貼靠

若是給三個div均設置了float: left;屬性以後，而後設置寬高。當改變瀏覽器窗口大小時，能夠看到div的貼靠效果，以下圖

上圖顯示，3號若是有足夠空間，那麼就會靠着2號。若是沒有足夠的空間，那麼會靠着1號。若是沒有足夠的空間靠着1號，3號本身去貼左牆，不過3號貼左牆的時候，並不會往1號裏面擠，而是往1號下面排列，若是小到極限時，裏面的浮動的子元素寬度是不會改變的

一樣，float還有一個屬性值是right，這個和屬性值left是對稱的。

浮動的元素有「字圍」效果

來一張圖，以下：

上圖中，咱們發現：div擋住了p，但不會擋住p中的文字，造成「字圍」效果。

收縮

收縮：一個浮動的元素，若是沒有設置width，那麼將自動收縮爲內容的寬度（這點很是像行內元素） 如圖：

上圖中，div自己是塊級元素，若是不設置widh，它會單獨霸佔整行；可是，設置div浮動後，它會收縮

若是一個元素沒有設置高度，它的高度是靠裏面的內容撐起來的。若是父元素內部元素都浮動了，那麼會形成父元素的高度塌陷

同步

若是多個元素浮動了，那麼這們就會並排顯示，若是都是同一個方向的浮動，它們會牢牢地貼在一塊兒(本身動手寫一下)

若是一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接着，若是是左浮動，就向左移動，直到移動到父元素的左邊界，若是是向右浮動，就向右移動，直接移動到父元素的右邊界

補充：

上圖所示，將para1和para2設置爲浮動，它們是div的兒子。此時para1+para2的寬度小於div的寬度。效果如上圖所示。可若是設置para1+para2的寬度大於div的寬度，咱們會發現，para2掉下來了：

補充

• 浮動只對父元素和之後的元素有影響，對以前的元素沒有影響

浮動的清除(重點)

元素浮動會形成的影響：

對父元素的影響(父元素的高度坍塌)
解決辦法：

• 加高法 給父元素設置高度，就不會塌陷(簡單，基本不用，大部分狀況下父元素的高度是須要子元素撐起來的)
• overflow:hidden 簡單，使用overflow:hidden父元素的高度會隨着子元素的高度變化而變化。overflow:hidden本職工做是用來處理溢出 在使用過程當中，須要注意子元素若是想要超出父元素高度，此時overflow:hidden就不適合了
• 隔牆法(clear:both) 在全部子元素後面加一個空的div 在這個div上面加clear:both，就能夠清除浮動（分爲內牆法和外牆法，本質上同樣），clear:both是專業清除浮動的

對後面兄弟元素形成的影響(兄弟元素會向上移動)
解決辦法：

• 在受影響的元素上面的加 clear:both（參考對父元素的影響）

項目中最經常使用的清除浮動的辦法 利用僞元素 after
其實很簡單,就是寫一個清除浮動的類,哪一個元素想要清除浮動,只需加上 class="clearfix" 就能夠,很是簡單
清除浮動類的代碼:

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

因爲浮動具備破壞性,因此後面就有一個新的Flex佈局方案,用起來別提多爽了,絕對讓你爽到爆,還簡單容易上手,想了解 Flex佈局 ,請參考個人文章：Flex 佈局教程

---

^_<