在頁面的布局過程中浮動是個好東西，我們經(jīng)常會用到浮動布局，它可以使元素共享一行，極大的方便了我們的布局過程。但是很多人可能只是會用，對浮動的原理只是一知半解，如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響，那么面對代碼量龐大的頁面將會變得一頭霧水。所以接下來我們來深入學習一下浮動布局，相信大家把浮動這個概念掌握的很清晰的時候，以后運用起來將會更加得心應手。

[[182598]]

一. 什么是浮動布局?

CSS 的 Float(浮動)，會使元素向左或向右移動，使元素共享一行，類似于給元素加了inline-block的作用。在w3c中這樣描述浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。接下來我們具體來看。

二. 浮動帶來的影響

1. 脫離文檔流，不占據(jù)頁面空間

我們知道，css的塊級元素比如說div在頁面中默認是獨占一行并且自上而下排列，也就是我們所說的流，也就是我們通常所說的標準流，接下來我們來看以下的案例：

html代碼：

<div class="div1">150 * 100</div> 
<div class="div2">100 * 150</div> 
<div class="div3">300 * 200</div>  

css代碼：

.div1{ 
 
width: 150px; 
 
height: 100px; 
 
background: pink; 
 
} 
 
.div2{ 
 
width: 100px; 
 
height: 150px; 
 
background: lavender; 
 
} 
 
.div3{ 
 
width: 300px; 
 
height: 200px; 
 
background: skyblue; 
 
} 

效果如下圖：

(一看這個顏色就知道樓主是個女孩紙，😋)

上圖結(jié)果分析：

在標準流的理論中，div作為塊級元素會獨占一行，但是布局中一個最常見的問題就是如何能讓多個div元素顯示在同一行，這時，標準流已經(jīng)不能滿足我們的需求。此時我們就需要對元素進行浮動，此時我如果想讓div1和div2顯示在同一行，就需要對這兩個元素添加浮動屬性 float:left，此時我們來看一下結(jié)果：

上圖結(jié)果分析：

如上圖所示，可以看到，粉色的div和紫色的div覆蓋在了藍色div的上面。這是因為浮動元素脫離了標準流到了浮動層，浮動層比標準層要高并且不占據(jù)頁面空間，所以我們看到div1和div2覆蓋在了div3上面，雖然是覆蓋但是div3里面的文字會被擠走，此時div3仍然在標準層所以仍然是占據(jù)頁面空間的。

2. 浮動會將行內(nèi)元素和行內(nèi)塊元素轉(zhuǎn)化為塊元素

上面講的塊元素可以進行浮動，其實對于行元素和行內(nèi)塊元素也可以進行浮動，并且一旦進行了浮動就將其轉(zhuǎn)化為了塊元素，我們這里以span標簽來舉例。

html代碼：

<span class="span1">span1</span> 
<span class="span2">span2</span> 
<span class="span3">span3</span> 

css代碼：

.span1{ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
.span2{ 
    width: 200px; 
    height: 200px; 
    background: green; 
} 
.span3{ 
    width: 200px; 
    height: 200px; 
    background: blue; 
} 

結(jié)果如下：

眾所周知，span是最常見的行內(nèi)元素之一，行內(nèi)元素共享同一行，中間有間隔，寬度和高度屬性不起作用，此時，我們給每個span1加浮動屬性float:left，我們看一下會有什么樣的結(jié)果呢?結(jié)果如下圖所示：

很顯然，浮動過后的元素寬度和高度屬性開始起作用，說明span元素從行標簽變成了塊標簽。

三. 清除浮動

與其說是清除浮動，不如說是清除浮動帶來的影響，我們一一來看清除浮動常見的四種方法：

假如說我們要實現(xiàn)如下布局，上方是導航部分，下方是內(nèi)容部分，導航部分兩個塊左右浮動。

接下來我們來看原始代碼，也就是未清除浮動時候的代碼：

html代碼：

<!-- 導航部分 --> 
<div class="nav"> 
    <div class="left">logo</div> 
    <div class="right">右邊區(qū)域</div> 
</div> 
<!-- 內(nèi)容部分 --> 
<div class="content"></div> 

css代碼：

.nav{ 
    width: 100%; 
    background: #c0c0c0; 
    padding: 10px; 
} 
.left{ 
    width: 300px; 
    height: 50px; 
    background: pink; 
    float: left; 
} 
.right{ 
    width: 300px; 
    height: 50px; 
    background: #abcdef; 
    float: right; 
}     
.content{ 
    height: 400px; 
    background: url("img/10.jpg"); 
    background-size: cover; 
} 

按照以上代碼，結(jié)果將如下圖：

結(jié)果分析：

我們知道，塊級元素如果沒有給高度，那么高度是由子元素還有padding值撐起來的，當left和right浮動之后脫離了文檔流，不再占據(jù)頁面空間，所以它們的父級的高度只有padding值，因而造成了上圖的結(jié)果。那么如何消除浮動產(chǎn)生的影響呢?我們來看如下解決措施：

1. 給浮動元素的父級一個高度。

.nav{ 
    width: 100%; 
    height: 50px; 
    background: #c0c0c0; 
    padding: 10px; 
} 

給浮動元素的父級一個高度，使之占據(jù)頁面空間，這種寫法的優(yōu)點是簡單容易理解，但是缺點也很突出，不適用于高度不固定的div。

2. 給浮動元素的父級加overflow:hidden

css代碼：

.nav{ 
    width: 100%; 
    overflow: hidden; 
    background: #c0c0c0; 
    padding: 10px; 
}　 

overflow:hidden 的意思是超出的部分要裁切隱藏掉，那么如果 float 的元素不占普通流位置，普通流的包含塊要根據(jù)內(nèi)容高度裁切隱藏。如果高度是默認值auto，那么不計算其內(nèi)浮動元素高度就裁切，就有可能會裁掉float元素。所以如果沒有明確設(shè)定容器高情況下，它要計算內(nèi)容全部高度才能確定在什么位置hidden，浮動的高度就要被計算進去，順帶達成了清理浮動的目標。

3. 給浮動元素的兄弟元素加clear:both

html代碼：

<div class="nav"> 
     <div class="left">logo</div> 
     <div class="right">右邊區(qū)域</div> 
     <div class="clear"></div> 
</div> 

css代碼：

.clear{ 
    clear: both; 
}  

在實際項目的布局中遇到的很多問題都是因為沒有清除浮動而造成的，所以一定要養(yǎng)成寫完一部分代碼就清除浮動的習慣。

祝學習進步，工作順利!