爲什麼出現浮動？
浮動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"></div>
<div class="clear"></div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}
- 1
- 2
- 3
- 4
- 5
效果圖如下：
此方法的缺點是，必要在頁面中添加很多沒有意義的冗餘元素，太麻煩，而且不符合語義化。
2.採用僞元素，這裏我們使用:after。添加一個類clearfix：
在我們需要清除浮動時，只需要給父元素追加clear類即可，既方便又符合語義化。
該方法的缺點是，IE6/IE7不識別:after僞元素，存在兼容性問題
<div class="box clearfix">
<div class="div"></div>
</div>
- 1
- 2
- 3
- 4
- 5
box{
margin:0 auto;
border:10px solid #000;
}
.div{
width:200px;
height:200px;
background:red;
float:left;
}
//IE6採用zoom
.clearfix{
*zoom:1;
}
//IE8+採用僞類
.clearfix:after{
display:block;
clear:both;/*clear:both的實現方法*/
content:"";
overflow:hidden;
height:0;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
當然，大神的fix類這麼寫：
.clear:after {
content:"";
display:table; /*採用此方法可以有效避免瀏覽器兼容問題*/
clear:both;
}
- 1
- 2
- 3
- 4
- 5
方法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纔可以創建塊級格式化上下文，下列方法都可以：
- 浮動 (元素的 float不爲 none）
- 絕對定位元素 (元素的 position爲 absolute 或 fixed)
- 行內塊 inline-blocks (元素的 display: inline-block)
- 表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素的 display: table-caption，HTML表格標題默認屬性)
- overflow的值不爲 visible的元素
-
彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)
採用float屬性之後產生的現象：
- 元素block塊狀花（磚頭化）
button默認的display是inline-block,加上float:left之後display變爲block - 破壞性造成的緊密排列特性（去空格化）
- 元素block塊狀花（磚頭化）
砌磚佈局的問題：
1、妙脆角-嘎嘣脆 - 容錯性比較糟糕，容易出現問題
2、吝嗇鬼-重用廢 - 這種佈局需要元素固定尺寸，很難重複使用
3、洋蔥頭-IE7飆淚 - 在低版本的IE下有很多問題
float與流體佈局