關於浮動與清除浮動 (附清除浮動的八種方式)
從語義上講：
float這個屬性顧名思義，既然叫浮動，咱們不妨把它與船體在水中的浮動聯絡起來。即可以這樣假設，document為一個水箱，document的文件流就是水箱裡的一層水，這層水的厚度無限接近於零，而所有在文件流中的元素都是在這層水中進行排列的，他們都有各自的佔位空間，所以不允許有任何的交疊。
而，float浮動，就恰好使原本在文件流這層水中的元素浮於水的表面（即脫離的文件流），說法不一定準確，因為浮動是否是真正的脫離的文件流還有待考究。一旦脫離的文件流後，該元素的佔位空間自然也就沒有了，但是這裡會有一個詭異的地方，所謂的沒有佔位空間，那麼就應該是元素可以自由的交疊。比如像position:absolute的那種。但是對於浮動的元素而言，會稍微有些區別。
浮動的元素，高度會塌陷，這可以理解為佔位空間消失造成的，同時高度塌陷也是我們佈局中需要清除浮動的最重要的原因之一。但是浮動的元素寬度卻處在一個“半塌陷”的狀態，為什麼說是“半塌陷”呢？請看下面圖例：
這是在沒有浮動的情況下，上面程式碼表現。
如果灰色的區域左浮動的話，會是下面的表現：
且慢，如果說寬度的佔位還在的話，那麼我們不妨對<p>標籤設定個margin-left或者padding-left看看如下：
其實執行結果和沒有設定padding值一樣的。除非padding-left或者margin-left的值大於浮動塊寬度（200px）時，我們再看看：如下：
這下可以看出來了，這就是我說“半塌陷”的原因，說是沒塌陷吧，那麼<p>元素就應該距浮動灰塊250px才對，說是塌陷了吧，那麼<p>在沒有padding-left和margin-left值的時候都應該和浮動塊重疊才對。這是float的詭異處之一。
按本人的理解，其實可以這樣解釋這個現象，這裡要引入一個自創的詞：“佔位空間層級”。是的，引入佔位空間層級這個概念之後，針對float這個元素，我們不妨可以這樣假定：沒有浮動的元素（即在文件流中的）的佔位空間層級為0,有浮動的元素（指float:left或right;不包括none）的佔位空間層級為1。這樣就可以解釋剛才我們的<p>的padding和margin值都是在層級為0的佔位空間中解析的，而所有的浮動元素由於都在同一個層級的佔位空間中，所以浮動元素之間的margin和padding值的解析是和我們正常理解是一致的。至於為什麼<p>不和浮動塊重疊，那是因為佔位空間層級的分界線和文件流基線不是同一個！以下為一個簡易的示意圖：
清除浮動：
說了這麼多浮動的東西，其實我們平時接觸最多的問題，還是清除浮動的問題。當初css的發明者之所以會創造clear這個屬性，就是因為float太過詭異，與文件流的層級標準都不統一，導致很難包容float所導致的負面影響，所以只能再造一個clear屬性，強制清除float帶來的後遺症。
說到這裡，我很同意一為同仁說的，我們平時說的“清除浮動”準確的說應該是“清除浮動造成的影響”，真正的清除浮動應該是float:none;
說到清除浮動造成的影響，又不得不說一下Dom元素的“包裹性”，因為在我們的實際編碼中，用clear來清除浮動已經很少見了。我記得很早前，那時候清除浮動就是在需要清除浮動的元素下面加個空元素，然後樣式設定為clear:left或者right或both,但在如今越來越講究web標準以及程式碼結構和語義化的時代，用空標籤這種既破壞結構有沒語義的方法已經顯得很傻很天真了。因為經過人們不懈的實踐，發現用包裹性來清除浮動造成的影響是更好的一種方式。
其他的先不多說，先看看除了空標籤清除浮動外的其他幾種方式吧。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* 通過overflow的方式 */
.overflow-clear{
overflow:auto;/*或者 hidden,scroll,不包括visible
*/
_height:1%;
/*設定高度是為了ie6獲取haslayout */
}
/* display 的方式*/
.display-clear{
display:inline-block;
}
/* position的方式 */
.position-clear{
position:absolute;
}
/* 浮動方式 */
.float-clear{
float:left;
/*或者right，不是none就行*/
}
/*zoom 的方式*/
.zoom-clear{
zoom:1;/* only for IE6.7 因為他們haslayout，ie8以後和標準瀏覽器都弱化了haslayout
*/
}
/*after偽類+content方式*/
.clearfix:after {
content:
".";
display:
block;
height:
0;
clear:
both;
visibility:
hidden;
}
/* Hides from IE-mac \*/
.clearfix {height:
1%;}
/* End hide from IE-mac */
|
上面幾種方式都有清除浮動影響的作用，前四種是和最後一種在ie678和其他標準瀏覽器下都有效地方法，zoom因為用到了ie的haslayout，所以只在ie6/7的核心下才有效。
隨便舉一例，如下：
<div class="overflow-clear" style="padding:10px;border:2px solid #999">
<div style="float:left;width:200px;height:200px;background:#ccc;"></div>
<p style="margin:0;padding-left:250px">我是文案</p>
</div>
執行的結果如下：
可見確實是清除了浮動造成的影響。同樣的可以試試其他的幾種方式。
清除浮動原理-包裹性：
說到包裹性，在這裡面的鼻祖應該算是diaplay:inline-block;其他的像overflow，position:absolute,float這幾個產生包裹性的原因，本質應該都是因為他們使Dom元素具有了類似inline-block的性質，所以，凡是設定了像display:inline-block或者overflow:hidden/scroll/auto或者position:absolute或者float:left/right這幾個屬性時，他們具有的包裹性都可以清除他們子元素浮動造成的影響。
-haslayout
這是ie私有的一個東西，不過隨著ie8像標準瀏覽器靠近，它對haslayout的解析也弱化了很多。我們來看看用overflow，zoom，和after偽類這幾個清除浮動的方式。
通過測試可以看到，display:inline-block,position:absolute,float:left/right 都把包裹性演繹的很好，但是overflow對包裹性的演繹沒那麼到位，所以導致ie6下必須強制獲取Dom元素的haslayout才能生效。
在ie下，只要我們對一個非inline級別的元素設定width或者height都可以觸發他的haslayout，而且，在windows的ie下有個“auto-clearing”的特性：只要給容器一個尺寸，它能使容器自 動擴充套件以便適應它所包含的內容，即便給它的尺寸非常小，所以1%的height在任何情況都是擴充套件高度適應它的內容。這就是為什麼在第一種方法中加了個ie6的hack是height:1%;原因。
同理，最後一個通過after偽類+content的方式最後要加個height:1%;也是這個原因。因為:after+content 只有在ie8和標準瀏覽器中支援。
那麼zoom，這個就不用多說了，這個是觸發haslayout最典型的一種方式...
我根據自己的經驗總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，後面三種方法只做瞭解就可以了）：
1，父級div定義 height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單，程式碼少，容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
評分：★★☆☆☆
2，結尾處加空div標籤 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動程式碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，程式碼少，瀏覽器支援好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
評分：★★★☆☆
3，父級div定義 偽類:after 和 zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動程式碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多，不少初學者不理解原理，要兩句程式碼結合使用，才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少CSS程式碼。
評分：★★★★☆
4，父級div定義 overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，程式碼少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
評分：★★★☆☆
5，父級div定義 overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，程式碼少，瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的程式碼不會出現滾動條就使用吧。
評分：★★☆☆☆
6，父級div 也一起浮動
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決程式碼*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：所有程式碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作瞭解。
評分：★☆☆☆☆
7，父級div定義 display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作瞭解。
評分：★☆☆☆☆
8，結尾處加 br標籤 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標籤 clear:both
建議：不推薦使用，只作瞭解。
評分：★☆☆☆☆
相關推薦
關於浮動與清除浮動 (附清除浮動的八種方式)
在css2裡，浮動（float）這個屬性是個經典又詭異的一個屬性，歷來對它的爭議就不斷。 從語義上講： float這個屬性顧名思義，既然叫浮動，咱們不妨把它與船體在水中的浮動聯絡起來。即可以這樣假設，document為一個水箱，document的文件流就是水箱裡的一
Python 與 C/C++ 交互的幾種方式
pythonpython作為一門腳本語言，其好處是語法簡單，很多東西都已經封裝好了，直接拿過來用就行，所以實現同樣一個功能，用Python寫要比用C/C++代碼量會少得多。但是優點也必然也伴隨著缺點（這是肯定的，不然還要其他語言幹嘛），python最被人詬病的一個地方可能就是其運行速度了。這這是大部分腳本語言
MySQL數據庫優化的八種方式
keyword nod 就是 body foo foreign otn 失敗 被鎖 引言： 關於數據庫優化，網上有不少資料和方法，但是不少質量參差不齊，有些總結的不夠到位，內容冗雜 偶爾發現了這篇文章，總結得很經典，文章流量也很大，所以拿到自己的總結文集中，積
八種方式實現跨域請求
防範 erro create ati brush col html5新特性 ole als 瀏覽器的同源策略 ? 提到跨域不能不先說一下”同源策略”。 ? 何為同源？只有當協議、端口、和域名都相同的頁面，則兩個頁面具有相同的源。只要網站的 協議名protocol、 主
C 物件與JSON字串互相轉換的幾種方式
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
Json字串與Object物件相互轉換的幾種方式
Json-Lib、Org.Json、Jackson、Gson、FastJson五種方式轉換json型別 只列舉了最省事的方式。不涉及複製情況和速度。 測試用例，一個User類，屬性name，age，location。重寫toString()。 public class User {
【力薦】ABAP常用DEBUG除錯程式碼的八種方式
1. 直接在程式中設斷點 在se38裡面打上breakpoint,程式執行到該處即進入debug模式2.background Job的debug 進入SM37 查詢到自己想要debug的後臺程式，這裡執行完畢或者正在執行的
阿里P7講解JAVA中實現單例(Singleton)模式的八種方式
單例模式 單例模式，是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中，應用該模式的類一個類只有一個例項。即一個類只有一個物件例項。 基本的實現思路 單例模式要求類能夠有返回物件一個引用(永遠是同一個)和一個獲得該例項的方法（必須是
MySql資料庫優化的八種方式
儘管我們可以使用子查詢（子查詢），連線（JOIN）和聯合（UNION）來建立各種各樣的查詢，但不是所有的資料庫操作都可以只用一條或少數幾條SQL語句就可以完成的。更多的時候是需要用到一系列的語句來完成某種工作。但是在這種情況下，當這個語句塊中的某一條語句執行出錯的時候，整個語句塊的操作就會變得不確定起來設想一
java中byte陣列與int型別的轉換（兩種方式）
java中byte陣列與int型別的轉換，在網路程式設計中這個演算法是最基本的演算法，我們都知道，在socket傳輸中，傳送、者接收的資料都是 byte陣列，但是int型別是4個byte組成的，如何把一個整形int轉換成byte陣列，同時如何把一個長度為4的byte陣列轉
ABAP常用DEBUG除錯程式碼的八種方式
1. 直接在程式中設斷點在se38裡面打上breakpoint,程式執行到該處即進入debug模式2.background Job的debug進入SM37 查詢到自己想要debug的後臺程式，這裡執行完畢或者正在執行的均可進入debug查詢到後打中job前面的勾 然後在控制框
spring與hibernate整合之sessionfactory的三種方式
方式1：只加載SessionFactory <bean id="sessionFactory"class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <propertyn
資料庫表與表之間的連線的幾種方式
1.內連線 inner join 左右表中都出現 2.左連線 left join 左表為準 3.右連線 right join 右表為準 4. 完全連線 linq的左連線 右連線 內連線 1.左連線 var leftJoin=from LT in t
時間戳與時間的相互轉換的幾種方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
android-Scheme與網頁跳轉原生的三種方式
什麼是 URL Scheme？ android中的scheme是一種頁面內跳轉協議，是一種非常好的實現機制，通過定義自己的scheme協議，可以非常方便跳轉app中的各個頁面；通過scheme協議，伺服器可以定製化告訴App跳轉那個頁面，可以通過通知欄
MySQL資料庫優化的八種方式(經典必看)
1、選取最適用的欄位屬性 MySQL可以很好的支援大資料量的存取，但是一般說來，資料庫中的表越小，在它上面執行的查詢也就會越快。因此，在建立表的時候，為了獲得更好的效能，我們可以將表中欄位的寬度設得儘可能小。 例如，在定義郵政編碼這個欄位時，如果將其設定為CHAR(2
MySQL數據庫優化的八種方式(經典必看)
sql arch 不用 多余 最適 子查詢 大數 寬度 我們 1、選取最適用的字段屬性 MySQL可以很好的支持大數據量的存取，但是一般說來，數據庫中的表越小，在它上面執行的查詢也就會越快。因此，在創建表的時候，為了獲得更好的性能，我們可以將表中字段的寬度設得盡可能小。
python基礎:建立字典的八種方式
前言 今天為大家介紹一個不錯的案例,建立字典的八種方式,說實話還是蠻有用的,下面就來詳細看看這個八種方式是如何實現的吧,程式碼如
查詢以太幣及代幣餘額與價格，進行以太幣與代幣的轉賬（兩種方式）並獲取交易記錄
查詢以太幣及代幣餘額與價格，進行以太幣與代幣的轉賬（兩種方式）並獲取交易記錄 1 // 補齊64位，不夠前面用0補齊 2 function addPreZero(num){ 3 var t = (num+'').length, 4 s = ''; 5 for(var i=0; i&l
css-浮動與清除浮動的原理詳解（清除浮動的原理你知道嗎）
alt col ges mage all strong splay height http float元素A的特點： 脫離文檔流 靠向left或right float元素會和塊盒子重疊 準確來說，是塊盒子和A重疊，但塊盒子內容會浮動在A周圍 不會和inline元素重