什么是浮動
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
我們來看幾個例子
-
請看下圖:當把框 1 向右浮動時,它脫離文檔流并且向右移動,直到它的右邊緣碰到包含框的右邊緣
-
請看下圖: 當框 1 向左浮動時,它脫離文檔流并且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中,所以它不占據空間,實際上覆蓋住了框 2,使框 2 從視圖中消失。如果把所有三個框都向左移動,那么框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。
-
請看下圖:如果包含框太窄,無法容納水平排列的三個浮動元素,那么其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那么當它們向下移動時可能被其它浮動元素“卡住”
實現浮動
在 CSS 中,我們通過 float 屬性實現元素的浮動。float 屬性定義元素在哪個方向浮動。其可能值有:
- left 元素向左浮動
- right 元素向右浮動
- none 默認值,元素不浮動
- inherit 規定從父元素繼承float屬性的值。
清除浮動
我們先來了解一下CSS標準文檔流,說白了就是一個“默認”狀態。元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。最終窗體自上而下分成一行行,并在每行中從左至右的順序排放元素。
但是我們在布局的時候,由于某些原因(當使用浮動、絕對定位、固定定位
)會使文檔脫離標準流,其中浮動會影響標準流的排列。
我們浮動的目的,就是可以把多個塊級元素放到想要的一行上。
清除浮動的原因:因為浮動會影響標準流,比如浮動造成的父級高度塌陷問題
清除浮動的方法
1、使用偽元素來清除浮動(:after,注意:作用于浮動元素的父親)
原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點類似,zoom(IE專有屬性)可解決ie6,ie7浮動問題
優點:瀏覽器支持好,不容易出現怪問題(目前:大型網站都有使用,如:騰迅,網易,新浪等等)
缺點:代碼多,不少初學者不理解原理,要兩句代碼結合使用,才能讓主流瀏覽器都支持
建議:推薦使用,建議定義公共類,以減少CSS代碼
.clearfix:after{
content:""; /*設置內容為空*/
height:0; /*高度為0*/
line-height:0; /*行高為0*/
display:block; /*將文本轉為塊級元素*/
visibility:hidden; /*將元素隱藏*/
clear:both; /*清除浮動*/
}
.clearfix{
zoom:1; /*為了兼容IE*/
}
2、添加新的元素對其應用 clear:both
原理:添加一個空元素,利用css提供的clear:both清除浮動,讓父級div能自動獲取到高度
優點:簡單,代碼少,瀏覽器支持好,不容易出現怪問題
缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空頁面標簽,造成結構的混亂。
建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法
//對添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
<div class="red" style="float:left;">1</div>
<div class="sienna" style="float:left;">2</div>
<div class="blue" style="float:left;">3</div>
//添加一個新元素
<div class="clear"></div>
</div>
3、父級div定義overflow:hidden
- 原理:使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
- 優點:簡單,代碼少,瀏覽器支持好
- 缺點:不能和position配合使用,因為超出的尺寸的會被隱藏
- 建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
4、父級div定義overflow:auto
- 原理:使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
- 優點:簡單,代碼少,瀏覽器支持好
- 缺點:內部寬高超過父級div時,會出現滾動條。
- 建議:不推薦使用,如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
5、父級定義高度height
只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題不推薦使用,只建議高度固定的布局時使用。
6、父級display設置成table
原理是將div屬性變成表格,可能會產生新的未知問題,不推薦使用,只作了解。