vue 配合 element-ui 佈局時，因element佈局容器預設flex佈局，而ie9不相容。為了使ie9上能良好的表現彈性佈局，查詢到以下部落格，完美解決。xi

一、float 佈局

float使元素脫離文件流，並且父元素內的其他的行內元素或者文字都會圍繞著他放置。

下面我們現寫一段float的佈局程式碼，來看一下float的作用。

樣式程式碼如下：

程式碼執行效果如下：

從上圖效果看，float:left的元素跑到的左邊，float：right的元素跑到了右邊。

父元素內的兩個span都圍繞著左浮動元素，因為預設是text-align：left，如果設定text-align：right，兩個span就會圍繞右浮動元素。

兩個浮動元素已經脫離了文件流，他們並沒有撐開父元素的高度。並且其後的block元素也沒有跟隨在他們後面，而是跟隨在非浮動元素的後面。

這已經使得我們的佈局錯落了，我們要想讓浮動元素撐開父元素，迴歸文件流，就需要用到clear來實現這一效果。

二、clear both清除浮動

clear用來清除浮動，可以用在浮動元素上，也可以用在非浮動元素上。

clear:left用來清除左浮動，

clear:right用來清除右浮動，

clear:both清除所有的浮動。

三、clear 用在float元素上

我們把上面的fright元素給他新增一個clear both樣式，

並將兩個block的text-align改為left，這樣效果看的更明顯些。

效果如下：

可以看到，右浮動元素的頂部是從左浮動元素的底部開始的。但是依舊沒有撐開父元素，這說明應用在浮動元素上的clear both只是對浮動元素起作用，對文件流中的元素不起作用。

四、clear both應用在非浮動元素上

我們把clear both樣式加在非浮動元素上面，注意只能加在display:block的塊狀元素上，在inline的行內元素上不起作用。

效果如下：

加在非浮動元素上的clear:both清除了浮動元素對其後面塊狀元素的影響，並且讓浮動元素撐開了父元素。達到了一般佈局的目的。

清除浮動這個功能樣式我們還可以利用：before，after偽類來實現。

:after 偽類清除浮動的程式碼

content屬性是必須的，不能缺少。有content屬性才能在父元素尾部新增內容。通過設定display:block使其成為塊狀元素。clear:both用來達到清除浮動的功能。

給fcont父元素新增clearfix樣式後效果如下：

通過偽類實現的clear both清除浮動後，float元素可以撐開父元素，並且父元素後的塊狀元素也不受float影響了。但是父元素fcont內部的塊元素還是受float影響。所以通過偽類實現clear both 清除浮動的功能，我們要避免在包含浮動的父元素中使用塊狀元素。

去除父元素內的塊狀元素後效果如下：

完美，實現了清浮動的效果。體現了clear both的價值了。

網上好多相容性清浮動程式碼如下：

上面這段程式碼，據說是相容到IE6，我覺得沒必要用。反正從我進入前端這行到現在，我都沒見過IE6瀏覽器，即使前些年在銀行外包的時候用過最老的IE也是IE7。而現在相容性要求最強烈的公司也最多要求到IE8，直接採用一行clearfix的清浮動，完全能滿足我們的程式碼需求。

float和clear both的妙用，實現flex佈局

效果圖如下：

你可以拖動瀏覽器大小，中間內容是不同的，跟橫向的flex效果是一樣一樣的。他跟margin負值的雙飛翼佈局不同，margin負值是兩側的寬度是確定的，我們這個佈局的妙處就是兩個float元素的寬度是不確定的，根據內容自適應的寬度。

上一下程式碼

樣式程式碼如下：