2. 程式人生 > >清除過浮動方法 清除浮動大全

清除過浮動方法 清除浮動大全

阿新 • • 發佈：2019-01-07
浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地佈局； 恨，浮動之後遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理是什麼？本文將一步一步地深入剖析其中的奧祕，讓浮動使用起來更加得心應手。


一、清除浮動 還是 閉合浮動 （Enclosing float or Clearing float）？

很多人都已經習慣稱之為清除浮動，以前我也一直這麼叫著，但是確切地來說是不準確的。我們應該用嚴謹的態度來對待程式碼，也能更好地幫助我們理解開頭的三個問題。

1）清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。

通過以上例項發現，其實我們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設定clear：both清除浮動並不能解決warp高度塌陷的問題。  
結論：用閉合浮動比清除浮動更加嚴謹，所以後文中統一稱之為：閉合浮動。


二、為何要清除浮動？

要解答這個問題，我們得先說說CSS中的定位機制：普通流，浮動，絕對定位 （其中"position:fixed" 是 "position:absolute" 的一個子類）。

1）普通流：很多人或者文章稱之為文件流或者普通文件流，其實標準里根本就沒有這個詞。如果把文件流直譯為英文就是 document flow ，但標準裡只有另一個詞，叫做普通流 （normal flow)，或者稱之為常規流。但似乎大家更習慣文件流的稱呼，因為很多中文翻譯的書就是這麼來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流） 這一詞，從來沒出現過document flow （文件流）

2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文件中的普通流，當一個元素浮動之後，不會影響到塊級框的佈局而只會影響內聯框（通常是文字）的排列，文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。


正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際佈局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

絕對定位就不多說了，不在本文討論範圍之內，下回分解。


三、清除浮動的原理——瞭解 hasLayout 和 Block formatting contexts

先看一下清理浮動的各種方法：

1）新增額外標籤

這是在學校老師就告訴我們的 一種方法，通過在浮動元素末尾新增一個空的標籤例如 <div style=”clear:both”></div>，其他標籤br等亦可。
  1. <div class="warp" id="float1">
  2. <h2>1）新增額外標籤</h2>
  3. <div class="main left">.main{float:left;}</div>
  4. <div class="side left">.side{float:right;}</div>
  5. <div style="clear:both;"></div>
  6. </div>
  7. <div class="footer">.footer</div>
複製程式碼 優點：通俗易懂，容易掌握
缺點：可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之後還是建議不要用了吧。

2）使用 br標籤和其自身的 html屬性

這個方法有些小眾，br 有 clear=“all | left | right | none” 屬性
  1. <div class="warp" id="float2">
  2. <h2>2）使用 br標籤和其自身的 html屬性</h2>
  3. <div class="main left">.main{float:left;}</div>
  4. <div class="side left">.side{float:right;}</div>
  5. <br clear="all" />
  6. </div>
  7. <div class="footer">.footer</div>
複製程式碼 優點：比空標籤方式語義稍強，程式碼量較少
缺點：同樣有違結構與表現的分離，不推薦使用

3)父元素設定 overflow：hidden

通過設定父元素overflow值設定為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
  1. <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
  2. <h2>3)父元素設定 overflow </h2>
  3. <div class="main left">.main{float:left;}</div>
  4. <div class="side left">.side{float:right;}</div>
  5. </div>
  6. <div class="footer">.footer</div>
複製程式碼 優點：不存在結構和語義化問題，程式碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；04年POPO就發現overflow:hidden會導致中鍵失效，這是我作為一個多標籤瀏覽控所不能接受的。所以還是不要使用了

4)父元素設定 overflow：auto 屬性

同樣IE6需要觸發hasLayout，演示和3差不多
優點：不存在結構和語義化問題，程式碼量極少
缺點：多個巢狀後，firefox某些情況會造成內容全選；IE中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等, 請看 嗷嗷的 Demo ,不要使用

5）父元素也設定浮動

優點：不存在結構和語義化問題，程式碼量極少
缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用

6）父元素設定display:table

優點：結構語義化完全正確，程式碼量極少
缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用

7）使用:after 偽元素

需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊裡面稱之為“偽物件”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。
由於IE6-7不支援:after，使用 zoom:1觸發 hasLayout。

該方法源自於:How To Clear Floats Without Structural Markup

原文全部程式碼如下:
  1. <style type="text/css"> .clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden; }  .clearfix {display: inline-block;}  /* for IE/Mac */  </style><!--[if IE]> <style type="text/css">.clearfix {zoom: 1;/* triggers hasLayout */ display: block;/* resets display for IE/Win */}</style> <![endif]-->
複製程式碼 鑑於 IE/Mac的市場佔有率極低,我們直接忽略掉,最後精簡的程式碼如下:
  1. .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
  2. .clearfix { *zoom:1; }
複製程式碼 優點：結構和語義化完全正確,程式碼量居中
缺點：複用方式不當會造成程式碼量增加

小結
通過對比，我們不難發現，其實以上列舉的方法，無非有兩類：
其一，通過在浮動元素的末尾新增一個空元素，設定 clear：both屬性，after偽元素其實也是通過 content 在元素的後面生成了內容為一個點的塊級元素；
其二，通過設定父元素 overflow 或者display：table 屬性來閉合浮動，我們來探討一下這裡面的原理。


在CSS2.1裡面有一個很重要的概念，但是國內的技術部落格介紹到的比較少，那就是Block formatting contexts（塊級格式化上下文），以下簡稱 BFC。
CSS3裡面對這個規範做了改動，稱之為：flow root，並且對觸發條件進行了進一步說明。


那麼如何觸發BFC呢？

  • float 除了none以外的值
  • overflow 除了visible 以外的值（hidden，auto，scroll ）
  • display (table-cell，table-caption，inline-block)
  • position（absolute，fixed）
  • fieldset元素

需要注意的是，display:table 本身並不會建立BFC，但是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以建立新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell建立的BFC效果是不一樣的。


fieldset 元素在www.w3.org裡目前沒有任何有關這個觸發行為的資訊，直到HTML5標準裡才出現。有些瀏覽器bugs（Webkit，Mozilla）提到過這個觸發行為，但是沒有任何官方宣告。實際上，即使fieldset在大多數的瀏覽器上都能建立新的塊級格式化上下文，開發者也不應該把這當做是理所當然的。CSS 2.1沒有定義哪種屬性適用於表單控制元件，也沒有定義如何使用CSS來給它們新增樣式。使用者代理可能會給這些屬性應用CSS屬性，建議開發者們把這種支援當做實驗性質的，更高版本的CSS可能會進一步規範這個。

BFC的特性：
1)塊級格式化上下文會阻止外邊距疊加當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。

2)塊級格式化上下文不會重疊浮動元素根據規定，一個塊級格式化上下文的邊框不能和它裡面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文建立隱式的外邊距來阻止它和浮動元素的外邊距疊加。由於這個原因，當給一個挨著浮動的塊級格式化上下文新增負的外邊距時將會不起作用（Webkit和IE6在這點上有一個問題——可以看這個測試用例）。 

3)塊級格式化上下文通常可以包含浮動詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots

通俗地來說：建立了 BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素，反之亦然，同時BFC任然屬於文件中的普通流。

至此，您或許明白了為什麼 overflow:hidden或者auto可以閉合浮動了，真是因為父元素建立了新的BFC。對於張鑫旭在對《overflow與zoom”清除浮動”的一些認識 》一文中對於用包裹來解釋閉合浮動的原理，我覺得是不夠嚴謹的，而且沒有依據。並且說道“Firefox等瀏覽器並沒有haslayout的概念”，那麼現代瀏覽器是有BFC的，從表現上來說，hasLayout 可以等同於 BFC。

IE6-7的顯示引擎使用的是一個稱為佈局（layout）的內部概念，由於這個顯示引擎自身存在很多的缺陷，直接導致了IE6-7的很多顯示bug。當我們說一個元素“得到 layout”，或者說一個元素“擁有 layout” 的時候，我們的意思是指它的微軟專有屬性 hasLayouthttp://msdn.microsoft.com/worksh ... rties/haslayout.asp 為此被設為了 true 。IE6-7使用佈局的概念來控制元素的尺寸和定位，那些擁有佈局（have layout）的元素負責本身及其子元素的尺寸設定和定位。如果一個元素的 hasLayout 為false，那麼它的尺寸和位置由最近擁有佈局的祖先元素控制。

觸發hasLayout的條件：
  • position: absolute
  • float: left|right
  • display: inline-block
  • width: 除 “auto” 外的任意值
  • height: 除 “auto” 外的任意值 （例如很多人清除浮動會用到 height: 1%  ）

在 IE7 中，overflow 也變成了一個 layout 觸發器：
  • overflow: hidden|scroll|auto （ 這個屬性在IE之前版本中沒有觸發 layout 的功能。 ）
  • overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支援。他們在之前IE版本中同樣沒有觸發 layout 的功能）

hasLayout更詳細的解釋請參見 old9翻譯的 大名鼎鼎的 《On having layout》一文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm），由於old9部落格被牆，中文版地址：
IE8使用了全新的顯示引擎，據稱不使用 hasLayout屬性了，因此解決了很多深惡痛絕的bug，但 IE8~IE11 通過「document.documentElement.currentStyle.hasLayout」依然可以獲得 hasLayout 的標誌，我寫了一個測試 Demo（IE8 中 zoom:1 返回 false），更詳細的請看《IE8 haslayout = true》


綜上所述：在支援BFC的瀏覽器（IE8+，firefox，chrome，safari）通過建立新的BFC閉合浮動；在不支援 BFC的瀏覽器 （IE6-7），通過觸發 hasLayout 閉合浮動。


四、閉合浮動方法——精益求精

上面已經列舉了7種閉合浮動的方法，通過第三節分析的原理，我們發現其實更多的：display：table-cell，display：inline-block等只要觸發了BFC的屬性值都可以閉合浮動。從各個方面比較，after偽元素閉合浮動無疑是相對比較好的解決方案了，下面詳細說說該方法。
  1. .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
  2. .clearfix { *zoom:1; }
複製程式碼 1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;
4）通過 content:"."生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，例如oocss裡面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裡面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
通過分析發現，除了clear：both用來清除浮動的，其他程式碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什麼會有font-size：0，line-height：0。


精益求精方案一：

相對於空標籤閉合浮動的方法程式碼似乎還是有些冗餘，通過查詢發現Unicode字元裡有一個“零寬度空格”，也就是U+200B，這個字元本身是不可見的，所以我們完全可以省略掉 visibility:hidden了
  1. .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
  2. .clearfix { *zoom:1; }
複製程式碼

精益求精方案二：

由Nicolas Gallagher 大溼提出來的,原文:A new micro clearfix hack，該方法也不存在firefox中空隙的問題。
  1. /* For modern browsers */
  2. .cf:before,.cf:after {
  3. content:"";
  4. display:table;
  5. }
  6. .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
  7. .cf { zoom:1; }
複製程式碼
需要注意的是：
上面的方法用到了  ：before偽元素，很多人對這個有些迷惑，到底我什麼時候需要用before呢？為什麼方案一沒有呢？其實它是用來處理margin邊距重疊的，由於內部元素 float 建立了BFC，導致內部元素的margin-top和 上一個盒子的margin-bottom 發生疊加。如果這不是你所希望的，那麼就可以加上before，如果只是單純的閉合浮動，after就夠了！並不是如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器相容問題會存在一個垂直邊距疊加的bug，這不是bug，是BFC應該有的特性。


在實際開發中，改進方案一由於存在Unicode字元不適合內嵌CSS的GB2312編碼的頁面，使用方案7完全可以解決我們的需求了，改進方案二等待大家的進一步實踐。方案3、4通過overflow閉合浮動，實際上已經建立了新的 塊級格式化上下文，這將導致其佈局和相對於浮動的行為等發生一系列的變化，清除浮動只不過是一系列變化中的一個作用而已。所以為了閉合浮動去改變全域性特性，這是不明智的，帶來的風險就是一系列的bug，比如firefox 早期版本產生 focus，截斷絕對定位的層等等。始終要明白，如果單單只是需要閉合浮動，overflow就不要使用，而不是某些文章所說的“慎用”。

前前後後花了三天寫完了這篇文章。如果覺得本文對您有幫助，您的留言就是對我最大的支援，同時由於精力有限，歡迎指出文中錯誤與不足，共勉之！

相關推薦

清除過浮動方法 清除浮動大全

浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地佈局； 恨，浮動之後遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理

css清除浮動方法大全

CSS清除浮動是每一位web前端工程師都要掌握的技術，也是讓每一位剛入門的前端工程師感到頭疼的問題，下面就來講一下CSS清除浮動的原理和各種解決方法，大家可以根據實際情況選擇最佳的解決方案。 在用DIV+CSS佈局時通常都會用到浮動（float）來完成頁面

css浮動布局，浮動原理，清除(閉合)浮動方法

alt 容器 images 進行 type -s ext 浮動框 形象 css浮動 1.什麽是浮動：在我們布局的時用到的一種技術，能夠方便我們進行布局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置 2.浮動的原理：使當前元素脫離普通流，相當

CSS清除浮動方法

pla 處理 adding ges 元素 高度 height css pre HTML結構 1 <div class="wrap"> 2 <div class="div1">1</div> 3 <div clas

css 清除浮動方法

方法一 使用一個空標籤 <div class="content"> <div class="col-1">佈局1</div> <div class="col-2">佈局2</div> 內容 <d

清除浮動方法介紹

在設計網頁樣式時我們所最需要的就是清除浮動，這樣頁面才可以按照我們所想去實現一些樣式。標準文件流是做不出網頁的。下面小編具體介紹一些清除浮動方法。 首先我們要明確，浮動的清除不是指的是把浮動去掉而是關住浮動，使得浮動與浮動之間相互不影響。 1.給盒子加高（不適用） 浮動在一個有高度的盒子

為什麼要浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

(1)為什麼需要浮動 據網上資料顯示，以前提出浮動的概念主要是為了解決左邊圖片，右邊文字的需求，後來浮動在網頁的佈局中應用比較廣泛。我之前在學習網頁設計時，針對於一個花店的導航頁，存在許多的圖片顯示，而有效並且美觀的佈局樣式極為重要，這時float屬性就顯得尤為重要。 (2)什麼時候

CSS基礎 和 font字型、背景屬性連寫 與 清除浮動方法

1.偽類 　　1. :link 　　2. :visited 　　3. :hover(重要) 　　4. :active 　　5. :focus(input標籤獲取游標焦點) 2.偽元素 　　1.:first-letter 　　2.:before(重要在內部前面新增) 　　3.：after(重要 在內部後面新

浮動的清除 -- 四種方法

原文：https://www.cnblogs.com/gchlcc/p/5824200.html 浮動的清除 -- 四種方法 前言 -- 一個父親不能被自己浮動的兒子，撐出高度。 開胃小菜 來看一個實驗：現在有兩個div，div身上沒有任何屬性。每個div中都有li，這些li都

css佈局時什麼時候需要清除浮動以及清除浮動都有哪些方法？

1、在以下情況下需要清除： 在對元素設定浮動時，元素就會脫離文件流，在css中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素，float主要流行與頁面佈局，使用之後沒有清除就會後患無窮。 2、常用到清除方法： 第一種：使用空標籤取出浮動；

html清除浮動方法

一、.clearfloat{clear:both;}1、clear語法：clear : none | left|right| both 2、clear引數值說明：none : 　允許兩邊都可以有浮動物件both : 　不允許有浮動物件left : 　不允許左邊有浮動物件rig

清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

什麼時候要清除浮動 其實浮動float最開始出現的意義只是為了讓文字環繞圖片而已。但人們發現，如果想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。但這樣做也會帶來問題...... 我們希望看到這樣的效果： 希望看到的效果 但結果卻是這樣： 實際的效果 這個時候，我們就要清除浮動帶來的影響

理解為何需要清除浮動及清除浮動的方法

  初衷：寫這篇文章是博主之前參加百度面試，被問到清楚浮動的方法，答了幾種方法當提到overflow：hidden之後被追問什麼是bfc，隨即啞火。感嘆自己對知識的深度著實不夠。所以打算寫一篇文章作為

html在一行內橫向排列並排同行同時顯示兩個多個div盒子的方法(CSS浮動清除float-clear/inline)/辦法

最近在做一個div css切割，昨晚發現了長期以來一直無記錄下來的問題！關於相容IE跟FF的float屬性。趁現在還清醒趕緊記下筆記先： 一、並排在一行的兩個div樣式有這種情況：ie或者ff下對於子div設定float左的時候，如果另外的子div沒有設定float左的 話，兩個瀏覽器下會有區別，具體有一個

CSS學習——清除浮動方法2

前言 在前端開發中，我們會經常使用到浮動，所以我們要經常清除浮動。那麼有沒有清除浮動的程式碼呢？當然是有的呀。 清除浮動方法2 .clearfix { *zoom: 1; } .clearfix:af

實用css技巧——清除浮動方法總結

相信不少跟我一樣的前端新手在利用float浮動來進行頁面的佈局和定位時都會遇到這樣的問題：一旦當前浮動元素的父級div不設定固定的高度height時，浮動的元素無法將父級div的內容撐開。導致整個頁面

CSS篇之2. 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

2. 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法 ？ 一.什麼時候需要清除浮動？ 我們對元素進行了浮動(float)時，我們的元素就會脫離文件流，像一隻小船一樣漂流在文件之上。 在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而

幾種常用的清除浮動方法

1、父級div定義偽類：after和zoom <style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;

CSS清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

 <div class="wrap" id="float1"> <h2>1）新增額外標籤</h2> <div class="main left">.main{float:left;}</div> <div class="side le

清除盒子內子元素浮動導致父元素塌陷的5種方法

before -s rfi 方便 css float 需要 for 通過 更詳細的解釋請移動到： 　　地址1：http://www.cnblogs.com/chedabang/p/5973601.html 　　地址2：https://www.cnblogs.com/libi