為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？

為什么出現浮動？

浮動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。

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
   • 破壞性造成的緊密排列特性（去空格化）

砌磚布局的問題：
1、妙脆角-嘎嘣脆 - 容錯性比較糟糕，容易出現問題
2、吝嗇鬼-重用廢 - 這種布局需要元素固定尺寸，很難重復使用
3、洋蔥頭-IE7飆淚 - 在低版本的IE下有很多問題

float與流體布局