整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章講了文檔流相關知識，網頁中html元素會按照標準規則排列，塊級元素從上到下，行內元素從左到右排列。如果這時想讓一個元素排到右側，怎么辦？
這時就可以使用浮動float 和 定位 position ，今天主要介紹float，關于float屬性稍微有點難理解，它是把雙刃刀，會用的會做出各種很好的效果，不會用的反而問題越來越多。
float 屬性有以下幾個值：
如下示例：
左浮動
右浮動
這里注意：右浮動是從右到左排列元素，子元素的html實際位置是按照，子元素1>子元素2>子元素3的順序，但是右浮動的顯示效果是子元素1在最右邊，依次向左，正好和元素實際位置相反。
float 浮動可歸納以下幾點：
浮動float最初設計的目的是實現文字環繞的功能，如下圖所示：
沒有使用浮動：
使用浮動后：
從上圖看到圖片脫離了文檔流浮動到左邊，但是沒有脫離文本流，文本環繞著圖片。
文字環繞效果除了float屬性能夠實現，再找不到其它方法，這就是它的真正用處，但是在早期網頁制作中，它被用來實現各種布局，比如水平的菜單，或者左邊圖片右邊文字等等效果。但是在使用float的過程中出現了各種問題，比如父元素高度塌陷，破壞相鄰元素的布局等等。
當一個元素里面的子元素使用了float浮動，其父元素如果沒有設置高度或者高度小于浮動元素的高度時，父元素就會出現如下示例：
沒有使用浮動：
使用浮動后：
如上圖紅色邊框就是父元素，沒使用float前，它的高度被子元素撐開。當使用float后可以看到父元素的高度變成0了，這就是高度塌陷。
float 浮動可以使一個行內元素變成塊級元素，準確地說應該更像是 inline-block 行內塊級元素，但又不完全一樣。看下如下示例：
沒有使用float前：
子元素是一個塊級元素，占滿了一行，其寬度默認為100%。
使用float后：
可以看到，子元素的寬度變了，等于其內容的實際寬度。和行內元素一樣，但是不同之處就是浮動可以使元素浮動到左側或者右側，如上圖。行內元素則不行，只能從左到右排列，這就是float的特殊之處，所以常常被用來制作一些復雜的布局效果。
float雖然能夠解決一些布局的問題，但是用不好就會造成頁面布局混亂，出現各種奇怪的問題，如下示例：
沒有使用float前：
如上圖，所有元素從上到下排列，父級那個元素和上下相鄰。
使用float后：
此時可以看到，父級那個元素下面的相鄰元素2，由于父級元素高度塌陷，也向上移動位置，這樣導致浮動元素就會覆蓋下面的相鄰元素2，這不是我們期望的結果。
怎么解決了？要么給父級元素設置一個固定的高度，這個高度要大于浮動元素的高度，或者使用clear屬性清除浮動。
為了解決浮動造成的破壞，此時就要使用各種方法來清除浮動，常見的有以下三種方法：
1、給浮動元素父級元素使用 overflow
如下示例：
overflow:hidden;
zoom:1;可以看到父級元素的高度不塌陷了，被子元素撐高了。由于沒有設置高度，其高度等于子元素的高度。
overflow 的缺點就是，當子元素寬度和高度超出父級時，會隱藏部分子元素內容。
在早期為了兼容ie瀏覽器，除了使用overflow：hidden；還要加上zoom：1；否則會出現一些怪異的現象。
2、使用clear屬性
clear 屬性用來是一個元素不受相鄰浮動元素的影響，它有 both （清除左右浮動），left（清除左浮動），right（清除右浮動），none （允許其相鄰元素有浮動，默認值）。
如下示例：
clear：both；看到這里和使用overflow的效果一樣，不同之處是，要額外在父級元素中增加一個標簽來做清除浮動。這也就是它的最大缺點。
使用after偽類，可以不用額外增加一個多余的標簽，如下示例：
.fix:after{
display:block;
content:'';
clear:both;
line-height:0;
}綜上所述，方法3是最后的。以上三種方法都是解決父級高度塌陷問題，還有一種情況就是給相鄰元素2設置clear 屬性，會是什么效果？
如下示例：
<div class="d2" style="clear:both;">
相鄰元素2
</div>如上圖看到相鄰元素2，恢復到默認文檔流中的位置，但是發現父級元素的高度仍然塌陷，這種清除浮動的情況是比較特殊的，和之前的不一樣。
float 是不是有點難懂，沒辦法浮動的初衷就不是用來布局的，被玩壞了。但是不要緊，float在如今網頁布局中已經很少使用，css3已經有了新的方案，比如flex等。所以關于本篇了解下就可以了，不需要完全掌握。
感謝閱讀，歡迎指出錯誤或者補充。
上篇：前端入門——網頁中的文檔流和布局
loat屬性
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
float屬性使元素能在設計中到處移動，從而讓其他元素圍繞它們。元素的浮動是水平而不是垂直方向的，只有三種可能屬性值：none，right，left.使用這兩個值時，浮動元素將浮動到容器元素所允許的最右或者最左.
clear屬性
清除浮動元素 取值：left,right,both,none ,inherit。這個規則只能影響使用清除的元素本身，不能影響其他元素。它表示框的哪些邊不應該挨著浮動框。它讓周圍的元素為浮動元素留出空間。
float屬性實例
把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣
當框 1 向左浮動時，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
Clear屬性實例
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創建浮動框可以使文本圍繞圖像
阻止行框圍繞浮動框,在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面
浮動和清理實例：
假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：又出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>
這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news { background-color: gray; border: solid 1px black; float: left; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。
頁面布局的過程中，浮動是大家經常用的屬性。在好多的排版布局中都是用的的浮動比如說下面這些地方都是應用到了浮動。
在我學習浮動的時候可是熬壞了腦筋，在這里我分享一下我對浮動這塊知識的總結。
一、浮動的定義
使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
說到脫離文檔流要說一下什么是文檔流，文檔流是是文檔中可顯示對象在排列時所占用的位置/空間，而脫離文檔流就是在頁面中不占位置了。
二、屬性
float：left； 左浮動
float：right；右浮動
三、浮動的情況
下面我就用這個布局為例子來講解浮動，css樣式外面的div給了一個高度，其他的不多說。
1.左浮動float:left;
給里面的三個p標簽 float:left; 屬性，看一下是什么情況的。我們都知道塊級標簽會默認占據一行的所以他們是一排一個展示的，但是看下圖會發現他們按照順序排列成一排了。
2.右浮動 float:right;
同樣的我們給box中的p標簽一個 float:right; 屬性。他們會按照順序排到右邊去了。
3.這一次我們只給第二個p浮動來看看會發生什么情況，這時候你會發現，3不見了，他其實在2的下面，我給3一個寬一點的寬度。會發現3在2的下面。
4.給3一個浮動
他會沒有什么變化，因為浮動只會影響他后面的元素，如果上面的元素不浮動，他也不會上去的
5.把外面的div寬度變小一些，p浮動
如果父元素太窄，無法容納所有的浮動元素，無法容納的浮動元素會換行顯示。
6.浮動的特殊情況
以換行的那個元素為基準，如果有浮動元素的高度大于換行的那個元素，那么當換行元素換行時會被高的那個元素"卡住"。初始樣式是左圖.
7.浮動對文字的影響 給p標簽浮動
浮動框只會占據自己的位置，使文字可以圍繞浮動框顯示
四、浮動之后有很多特性
1.塊級元素可以橫排顯示
2.行內元素可以設置寬度和高度
3.元素沒有設置寬度和高度時，寬度為內容撐開寬
4.支持margin
5.脫離文檔流
6.提升半層級
問題:不支持margin:auto;
五、清除浮動
1. 為什么要清除浮動？
前面提到了我給了外面的div一個高度，這里我們不給他高度，讓里面的p浮動看看會發生什么情況。
未浮動
浮動之后
我們會發現子元素浮動會造成父級盒子高度坍塌，這樣如果下面在進行繼續布局的話會使頁面布局錯亂，(下圖中黃色的盒子是nav下的div)如果想要繼續布局就要清除浮動了，這里我介紹幾種清除浮動的方法。
標簽和樣子如下兩幅圖
父級的做法
1. 父級 緊鄰兄弟法
給nav一個clear：both屬性，下圖會發現可以正常顯示
缺點：只是讓后面的元素正常顯示，并沒有撐開box的高度
2.父級給高度
box給高度，可以正常顯示。
缺點：一般都是元素內容撐開高度，拓展性不好。
3.父級元素 display:inline-block;
box給display:inline-block;可以正常顯示
缺點：父級盒子margin:auto;失效，會發現上部分和下面黃色中間有間隙。
4.父級overflow:hidden;
可以正常顯示
缺點：需要配合寬度
子元素
1.要加給浮動元素末尾的后面再添加一個元素。加上一個clear屬性
可以正常顯示
缺點：隨意的添加一個空元素，不符合代碼規范
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
