css浮動現象及清除浮動的方法

css浮動現象及清除浮動的方法

 

首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。

除了用浮動外，目前暫無其餘方法實現文本環繞

 

再來看看浮動的具體定義：

浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，屬於浮動佈局。 (CSS三種基本的定位機制：普通流、浮動和絕對定位)

當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。

正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。

 
 

浮動未清除，會形成頁面混亂（以下）：

• 浮動元素沒有設置寬度值，元素的寬度隨內容的寬度的變化而變化
• 會對相鄰的元素產生影響，相鄰元素特指緊鄰後面的元素。

若是相鄰元素是塊級元素會無視這個浮動的塊框，也就是咱們平時看到的效果——使到自身儘量與這個浮動元素處於同一行，致使被浮動元素覆蓋。除非這些 div 設置了寬度，而且父元素的寬度不足以包含它們，這樣兄弟元素纔會被強制換行。

若是相鄰元素是內聯元素，則會盡量圍繞浮動元素。

• 元素父元素中的元素所有設置了浮動，父元素獲取高度失效(父元素不計算浮動元素高度，即高度塌陷)。

 
 

在介紹清除浮動方法以前，先了解下：什麼是BFC?

Block formatting contexts （塊級格式化上下文），如下簡稱 BFC，用於對塊級元素排版。建立了 BFC的元素就是一個獨立的盒子（HTML中的一個盒子, 看不見而已），裏面的子元素不會在佈局上影響外面的元素，一樣，外面的元素，也不會影響其子元素。

默認狀況下只有根元素（body）一個塊級上下文，其餘元素知足至少下列條件之一才能造成BFC:

float屬性不爲none

position屬性不爲static | relative

display屬性爲下列之一:table-cell | table-caption| inline-block | flex | inline-flex

overflow屬性不爲visible

fieldset元素  //fieldset標籤將表單的信息進行分類

​
​

可是它們各自卻有着不同的表現：

display: table : 在響應式佈局中會有問題

overflow: scroll : 可能會出現你不想要的滾動條

float: left: 使元素左浮動，而且其餘元素對其環繞

overflow: hidden: 消除溢出部分

須要注意的是，display:table 自己並不會建立BFC，可是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell能夠建立新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是display:table。因此經過display:table和display:table-cell建立的BFC效果是不同的。

 
 

BFC的三個特性：

1. BFC會阻止外邊距疊加

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

1. BFC不會重疊浮動元素

根據規定，一個塊級格式化上下文的邊框不能和它裏面的元素的外邊距重疊。這就意味着瀏覽器將會給塊級格式化上下文建立隱式的外邊距來阻止它和浮動元素的外邊距疊加。因爲這個緣由，當給一個挨着浮動的塊級格式化上下文添加負的外邊距時將會不起做用

1. BFC一般能夠包含浮動 (即計算BFC的高度時，浮動元素也參與計算)

獨立的塊級上下文能夠包裹浮動流，所有浮動子元素也不會引發容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，因此不用清除浮動來撐起高度。同時BFC任然屬於文檔中的普通流。

父元素建立了新的BFC，能夠閉合浮動

 
 

還有一個跟浮動和BFC有關的概念：hasLayout

hasLayout是ie私有的概念，ie7及更低版本的ie瀏覽器不支持BFC，但咱們能夠針對ie七、6瀏覽器加入對應的hasLayout規則來實現BFC的效果！

IE使用Layout概念來控制元素的尺寸和位置。能夠用Javascript函數hasLayout查看一個元素是否擁有Layout，返回true | false。若是一個元素有Layout，它就有自身的尺寸和位置；若是沒有，它的尺寸和位置由最近的擁有佈局的祖先元素控制。

hasLayout是一個只讀屬性，因此沒法使用Javascript進行設置。元素的hasLayout屬性值爲true的時候會達到和BFC相似的效果。如下方法可使元素hasLayout爲true：

position: absolute 

float: left | right

display: inline-block

width: 除 「auto」 外的任意值

height: 除 「auto」 外的任意值

zoom: 除 「normal」 外的任意值

writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto

 
 

具體清除浮動的方法及其優缺點:

其實你們習慣稱爲「清除浮動」實際上應該稱做「閉合浮動」。咱們想要達到的效果確切的說是閉合浮動，而不是單純的清除浮動，單純的清除浮動，並不能解決容器高度塌陷的問題。(浮動清除先後效果如圖：)

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

  ​

總結來講，有兩種方法閉合浮動：

浮動元素後面的同級標籤加clear: both | left | right屬性 （以下方法中的1、2、三）

爲元素新建BFC（以下方法中的4、5、六）

<style type="text/css">
    .clearFloatDiv1 { width: 400px; border: 1px solid #00ffde;padding: 20px; }
    .clearFloatDiv1 > div { width: 200px;padding: 25px 0; }
    .clearFloatDiv1 > div:nth-child(1) { background: #0ef; }
    .clearFloatDiv1 > div:nth-child(2) { background:#f7633d;}
    .clearFloatDiv1 > p { width: 400px; padding: 15px 0;background: #fcebd1; }
</style>

<div class="clearFloatDiv1">
    <div style="float: left;"></div>  //浮動元素
    <div style="float: left;"></div>  //浮動元素
</div>

 

方法一：浮動元素後，加樣式含clear：both的空標籤

<div class="clearFloatDiv1">
    <div style="float: left;"></div>  //浮動元素
    <div style="float: left;"></div>  //浮動元素
    <p style="clear:both;"></p>  //加空標籤，閉合浮動
</div>

優勢：通俗易懂，容易掌握

缺點：將添加不少無心義的空標籤，有違結構與表現的分離，後期維護會是噩夢。

 

 

方法二（摧薦）： 聽說是最高大上的方法 :after 方法（注意：做用於浮動元素的父親）

原理：一種清除浮動，他就是利用:after和:before來在元素內部插入兩個僞元素，在僞元素中加入clear:both屬性。與方法一相似

.clearFloat {   /*對IE6/7的兼容處理*/
    zoom:1; /*觸發 hasLayout*/
}

.clearFloat::after {
    clear:both;  /*指清除全部浮動*/
    content:'.';    /*內容，能夠爲空。也能夠用Unicode字符裏的 「零寬度空格」，也就是U+200B，這個字符自己是不可見的，能夠省略掉 visibility:hidden*/
    display:block;  /*對於FF/chrome/opera/IE8不能缺乏*/
    width: 0;
    height: 0;
    visibility:hidden; /*容許瀏覽器渲染它，可是不顯示出來*/

}

<div class="clearFloatDiv1 **clearFloat** "> //加clearFloat清除浮動
    <div style="float: left;"></div>  //浮動元素
    <div style="float: left;"></div>  //浮動元素
</div>

優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持

 
 

方法三（差）：使用br標籤及自身html屬性

(對應清除float:both、float:left、float:right的影響)

<div class="clearFloatDiv1">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <br clear="all"/>  //****閉合浮動
</div>

優勢：比空標籤方式語義稍強，代碼量較少

缺點：一樣有違結構與表現的分離，不推薦使用

 
 

方法四：父級元素定義 overflow: auto | hidden (爲兼容ie6，還需觸發hasLayout，如加: zoom: 1)

<div class="clearFloatDiv1" style="overflow:auto;">  //新建BFC
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

overflow屬性共有三個屬性值：hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動，但切記不能使用visible值。聽說auto對seo比較友好， hidden對seo不是太友好。

優勢：簡單，代碼少，瀏覽器支持好缺點

缺點：內部寬高超過父級div時，會出現滾動條。

 
 

方法五（差）：父元素也設置浮動 float: left | right

<div class="clearFloatDiv1" **style="float: left;"**>  //新建BFC
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

優勢：不存在結構和語義化問題，代碼量極少

缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用

 
 

方法六（差）：父元素設置display:table

<div class="clearFloatDiv1" **style="display: table;"**>  //新建BFC
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

優勢：結構語義化徹底正確，代碼量極少

缺點：盒模型屬性已經改變，由此形成的一系列問題，得不償失，不推薦使用