爲何會出現浮動和何時須要清除浮動？清除浮動的方式？

爲何出現浮動？

浮動float最開始出現的意義是爲了讓文字環繞圖片而已，但人們發現，若是想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。

何時清除浮動？

若是想要實現三個塊級元素並排顯示，指望效果以下圖所示： 

給三個塊級元素都加上float屬性後，頁面效果以下圖所示：

 

問題出現了，父元素高度塌陷了

一目瞭然：若是咱們給上面的三個綠顏色的方塊設置display:inline-block也能達到讓它們並排顯示的效果。而且父元素的高度也不會塌陷。只不過沒法控制是居左仍是居右，display:inline-block只能從左往右。

清除浮動的方式？

咱們說的清除浮動是指清除因爲子元素浮動帶來父元素高度塌陷的影響。

清除浮動的兩大基本方法：

• 方法1：腳底插入clear:both;
• 方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

方法1的具體實現：

1. 在父元素的最後加一個冗餘元素併爲其設置clear:both

原理以下：
當添加了最後一個冗餘元素（未設置clear:both）時；父元素和此冗餘元素的高度都爲0，而且三個浮動的元素都浮在了它們的上方蓋住了它們（能夠把它們當作PS中的圖層）。如今，給這個冗餘元素添加clear:both（clear屬性介紹），它便要躲開這三個浮動元素，所以，一直往下跑，直到沒有被浮動元素蓋住才停下來。而父元素看到這個子元素跑開了，天然想要包裹住它。
實現：

<div class="box">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="clear"></div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clear{ height:0px; clear:both; overflow: hidden;}

 

此方法的缺點是，必要在頁面中添加不少沒有意義的冗餘元素，太麻煩，並且不符合語義化。
2.採用僞元素，這裏咱們使用:after。添加一個類clearfix： （推薦）
在咱們須要清除浮動時，只須要給父元素追加clear類便可，既方便又符合語義化。
該方法的缺點是，IE6/IE7不識別:after僞元素，存在兼容性問題

<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after { 
     content:""; 
     display:table; /*採用此方法能夠有效避免瀏覽器兼容問題*/
     clear:both;
}

方法2的具體實現：

使用overflow屬性，給父元素添加overflow:hidden ||auto

overflow:hidden; zoom:1用於兼容IE6。

• 1
• 2

BFC/haslayout一般聲明

• float:left/right
• position:absolute/fixed
• overflow:hidden/scroll(IE7+)
• display:inline-block/table-cell(IE8+)
• width/height/zoom:1/…(IE6/IE7)

BFC塊級格式化上下文有如下特徵：

• 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加。
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• BFC的區域不會與float box疊加。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
• 計算BFC的高度時，浮動元素也參與計算。

不僅僅只有給父元素添加overflow:hidden才能夠建立塊級格式化上下文，下列方法均可以：

1. 浮動 (元素的 float不爲 none）
2. 絕對定位元素 (元素的 position爲 absolute 或 fixed)
3. 行內塊 inline-blocks (元素的 display: inline-block)
4. 表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
5. 表格標題 (元素的 display: table-caption，HTML表格標題默認屬性)
6. overflow的值不爲 visible的元素

7. 彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)

   採用float屬性以後產生的現象：

   • 元素block塊狀花（磚頭化）
     button默認的display是inline-block,加上float:left以後display變爲block
   • 破壞性形成的緊密排列特性（去空格化）

砌磚佈局的問題：
一、妙脆角-嘎嘣脆 - 容錯性比較糟糕，容易出現問題
二、吝嗇鬼-重用廢 - 這種佈局須要元素固定尺寸，很難重複使用
三、洋蔥頭-IE7飆淚 - 在低版本的IE下有不少問題

float與流體佈局