CSS浮动(float)属性学习经验分享
作為一名前端開發的初學者，CSS的布局定位無疑成為了一個難點，這兩天通過看一些博客的技術分享和自己的反復實踐，大概領悟到了一些float的“門道”。
下面就通過一些例子來歸納總結一下我所學到的浮動特性：
? ? ?
（一）浮動元素對其兄弟元素是標準流元素的影響：
? ? ? ? 現在假定HTML文檔中從上到下有3個塊元素A、B、C
? ? ? ?1.現設定A、C為標準流中的元素，B設為float:left (注：為了更直觀地顯示，設B的透明度為0.5，B是在C上方的)
由此可見：將B設為浮動元素后，B脫離了標準文檔流，浮于其上方，因此他的兄弟元素C上移，填補了因B漂浮而空出來的間隙。
?
? ? 2.現設定A為標準流中的元素，B、C、D設為float:left 如下圖：
?
再將B、C、D設為float:right ? 如下圖：
注意上兩幅圖中，B、C、D順序的不同，可以這樣理解：
當元素均設置為左浮動時，元素越在文檔中靠前越有居左優先權；
同理，當元素均設置為右浮動時，元素越在文檔中靠前越有居右優先權。
現在，看著圖想一想，把D的浮動屬性取消，將會出現怎樣的變化呢？ 如下圖：
由于現在標準文檔流中只剩下A，所以D會出現在A的下方。
可以這樣理解，BC是浮動元素在空中，AD在地面，原本靠前的BC由于飛到了上空，因此D的排位就靠前了。
那么BC此時改為左浮動又會出現什么樣的變化呢？如下圖：
是的，D依舊無視了BC的存在，排在了A的后面。
也許你此時會問，字母D為什么不好好待在原來的位置而溢出了藍色框呢？(float真是很頑皮呢 囧)
這里就要引出另一個小重點了：非浮動元素的塊級元素中的文字和其它內聯內容（例子中的藍色塊中的字母D）會圍繞著他的浮動兄弟元素（例子中的黃色塊）顯示
*內聯內容是能感受到空中浮動元素的存在，不會被覆蓋的
這里的環繞也是有講究的，分為兩種情況：
① 標準元素設置了固定寬度，且這個寬度小于浮動元素，那么文字將從浮動元素的下基準線開始顯示。如下圖：
?
②標準元素設置了固定寬度，且這個寬度大于浮動元素的寬度 or 標準流元素未設定固定寬度，
? 那么標準流元素中的內聯內容就會從浮動元素的右邊開始顯示。如下圖：
現在你應該明白之前的字母D為什么會溢出藍色框了吧
從上面的例子中我們還可以總結出另一個規律：
浮動元素雖然漂浮在空中，但是它是能感受到地面上標準流元素的存在的。
例如浮動元素B前面是一個標準流元素A，那么浮動元素無論是左浮動還是右浮動都會位于A的下面，即A的下底邊和B的上頂邊是位于同一水平線的。（可參見之前一開始的例子中的A和B）
?若浮動元素發現前一個元素也是浮動元素，若同向則排在它的后面；若反向則互不影響，左浮動的元素組與右浮動的元素組一開始均從同一水平線開始顯示。如下圖：
1、3、5左浮動 2、4、6右浮動 ?（DOM中的順序是1到6）
? ? ? ? ? ? 頁面寬度足夠的情況下： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??頁面寬度不足的情況下
? ? ? ? ? ? ? ? ? ? ? ?
?
?
（二）浮動元素對其父元素的影響：
?這也是浮動影響頁面布局中較為經典的一個問題。
?因為作為子元素設定為浮動后，它就脫離了標準文檔流，和它的父元素就不在一個平行空間了。
?因此子元素無法撐起父元素的高度，此時父元素的高度就會變為0，因而父元素沒有把子元素包圍起來，稱為塌陷(注意，父元素沒有設置固定高度)。如下圖：
（為了看著方便，代碼簡寫了，你懂的：）
<body> <div class="wrap"><div class="a">box1</div><div class="a">box2</div><div class="a">box3</div></div> </body>.wrap{ width:380px;border:3px solid #000; }.a{background-color:rgba(294,3,4,0.3);width:100px;height:100px;float:left;margin:10px; }原本期望得到的效果：
? ?
實際效果：
?
?
那么有解決的辦法嗎？有！而且還有多種方案供你選擇：）現在我們就一起來看看吧?
方案一：利用clear屬性，說到clear，我們先來簡單說說它的妙用
-------------------------插播clear屬性-------------------------------------
什么是clear呢？當某一元素使用了clear這一武器后，就可以讓它的左邊、右邊、或兩邊都不允許出現浮動元素（這是官方定義，但其實才沒那么簡單呢：（
例如，給例子中的box2添加clear屬性的各個值,就會得到下圖的效果：
? ? ? ? ? ? ? clear:left ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clear:right ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clear:both ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ?
? ? ? ? ?圖（1） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖（2） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖（3）
也許你會有疑惑，定義不是說使用clear:right不是讓它的右邊不出現浮動元素嗎，那么圖二中的box3為什么不下移呢？clear:both和我們預期的效果也不太一樣.
重要！這里要來另外說明一下：
clear：right作用于某一屬性后，作用是清除右浮動元素對它的影響；同理，clear：left作用是清除左浮動元素對它的影響；clear：both作用是清除右浮動元素和左浮動元素對它的影響。
還有點疑惑？我們再來看幾個例子。
?
? ? ? ?這是沒有clear的時候，DOM中的順序A到C，AB左浮動 ↓ ? ? ? ? ? ? ? ? ? ? ??
? ?
??現在對C設置clear:left或clear:both,都會得到下圖的結果，C成功擺脫 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?了AB對它的干擾，設置clear:right呢？沒用的，不信自己試
???
? ? ? ? ? ? ? ? ? ? ? ? ? 在一開始的基礎上現在再把B改為右浮動?↓ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?對C設置clear:left ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?對C設置clear:right和both ?
?
現在你應該也看出其中的規律了吧
?
-------------------------插播clear屬性--------完-----------------------------
扯太遠了，讓我們回到父元素塌陷的問題吧- -
方法（一）利用clear屬性
在box3后面加一個空標簽，并對它設置clear:left;
<div class="wrap"><div class="a">box1</div><div class="a" style="clear:">box2</div><div class="a">box3</div><div style="clear:left;"></div> /* 為清除浮動而加的空<div> */</div>?效果：
注：這個方法雖然直觀易懂，但是是非常拙劣以及不專業的做法，因為這個空的<div>并沒有實際語義，是為添加而添加的，結構與表現分離。
?
方法（二）對父元素設置overflow:hidden
.wrap {overflow: hidden;display: inline-block; /* 以此觸發IE6中的“hasLayout” */ }?
或者通過zoom屬性來觸發
.container {overflow: hidden; /* Clearfix! */zoom: 1; /*觸發IE中的“hasLayout” */ }?注：這個方法的缺點在于內容增多時或者子元素增添了一些其它的樣式時一些內容會被隱藏掉，無法顯示需要溢出的元素，可參考W3C上關于overflow屬性的介紹。
例如，給元素增加一些陰影，此時超出父元素邊框的陰影就會被隱藏。如下圖：
? ? ? ? ? ? ? ? ? ? ? ? 沒有父元素時 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可見陰影底部有一部分被遮蓋
??
?
方法（三）利用偽元素：after
由于IE6-7中不支持：after，同樣需要zoom來觸發hasLayout
.container:before, .container:after {content:"";display:table; } .container:after {clear:both; } .container {zoom:1; }效果：（和overflow的方法對比，陰影沒有被遮蓋）
注：缺點在于后期CSS不利于維護，不過相對來說是一個比較受歡迎的方法。
總結：沒有最好的方法，只有最合適的方法，具體問題具體分析。
?
好了，就先說到這里吧，還有很多有待我繼續去深入學習探究的地方，比如BFC、hasLayout等等，有不足錯誤之處希望大家不吝指出。
?
參考文章：
http://www.iyunlu.com/view/css-xhtml/55.html
http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
http://www.cnblogs.com/dolphinX/p/3508869.html
http://tiankonguse.com/blog/?p=573
http://www.cnblogs.com/newyorker/archive/2013/02/01/2886282.html
轉載于:https://www.cnblogs.com/wxh94/p/3861887.html
總結
以上是生活随笔為你收集整理的CSS浮动(float)属性学习经验分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nagios(icinga)借助chec
- 下一篇： Firefox 检测到该服务器正在将此地