瞭解CSS浮動以及清理浮動（Float）

CSS浮動

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，至關於不佔用空間，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

CSS 浮動屬性

css中，咱們使用float來實現浮動，使用方法以下：

img{
  float:right;
}

float屬性值有如下幾種：

left：元素向左浮動
right：元素向右浮動
none：默認值。元素不浮動，並會顯示在其文本出現的位置
inherit：從父元素繼承float屬性

瀏覽器支持

全部的主瀏覽器都支持float，可是IE均不支持"inherit"

CSS浮動情形

下面介紹浮動的使用情形及問題：

以下圖所示，當把框1向右浮動時，它脫離文檔流向右移動，直到它的右邊框碰到包含框

浮動意味着脫離文檔流，可能會引起一系列的問題，好比，將上圖的框1移向左邊，那麼框1在文檔中至關於沒有，框2，框3上移，表現出來就是框2消失不見

若是想要解決這個問題的話，能夠三個框同時左移，就不會有覆蓋的狀況，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

同時移動也帶來一些問題，若是包含框太窄，沒辦法容納三個框，這個時候該怎麼辦?

這個時候浮動塊就會進行調節，以下圖所示，第三個框會自動向下浮動，直到有足夠的空間，若是浮動過程當中發現有浮動框高度不一致，則會被卡住

浮動清理

由上咱們能夠看出，浮動會影響後面的元素，那怎麼清理浮動呢，現總結如下幾個方法：

使用帶clear的空&ltdiv>標籤

在浮動元素後添加一個空元素，如<div class="clear"></div>,而後在css中添加.clear{clear:both}便可。或者是<br class="clear"/>,都行(圖片講解更清晰)

這是最爲經常使用的一種辦法，兼容全部主流瀏覽器,但這種辦法使用了大量的無用標籤，不推薦

使用::after僞元素

利用浮動元素的容器的::after僞元素來清楚浮動，因爲::after僞元素只對塊級元素有用，所以要設置display:block，經過::after僞元素在浮動結束以後，向其中添加看不見的空格「\20」或者是點'.',咱們也可使用 content:""

須要注意的是IE6，IE7不支持after僞元素，所以要添加.clearfix{zoom:1}；來觸發haslayout，或者你能夠把它寫到IE六、7的CSS hacker文件裏，這樣不會影響W3C標準驗證

使用鄰接元素清除

直接給浮動元素的下一個元素添加一個clear：both；可是要注意一點，必須保證這個元素和浮動元素是在一層container中，若是在浮動元素的下一層的話，仍是老老實實用::after僞元素吧

使用overflow屬性

給浮動元素的容器添加overflow:hidden；(overflow:auto)。
這個辦法頗有意思啊，咱們知道，在使用float以後，元素會調到容器上層，可是使用overflow:hidden；以後，浮動元素又回到了容器中，把容器高度撐起，達到了清理浮動的做用（詳解見圖）

將容器設置成float

給浮動元素的容器也添加上浮動屬性便可清理內部浮動。同overflow法同樣無須添加額外的class，使用方便可是會對下面的文檔形成影響。

這種作法屬於一時爽的類型，由於給容器設置浮動以後，對後面的佈局也產生影響，不建議使用

使用display:table

採用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素。當容器被設置成了table或table-cell時，同時也建立了css2規定的block formatting contexts，這樣父容器就包含了元素的高度

爲何我把它放在這麼後面呢，由於，兼容性問題又來了。。display:talbe 系列樣式設定不在 IE6/7 的支持範圍以內

觸發 hasLayout 清除

爲了解決殺千刀的IE，特意來解決一下,首先，咱們瞭解一下IE裏的layout：
'layout'是IE的專有概念，它決定了元素如何對其內容進行定位和計算，與其餘元素的關係和相互做用，以及對應用還有使用者的影響
'Layout' 能夠被某些 CSS property（特性）不可逆的觸發，而某些 HTML 元素自己就具備 layout 。
'Layout' 在 IE 中能夠經過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
'Layout' 是 IE 瀏覽器渲染引擎的一個內部組成部分。在 IE 瀏覽器中，一個元素要麼本身對自身的內容進行組織和計算大小， 要麼依賴於包含塊來計算尺寸和組織內容。爲了協調這兩種方式的矛盾，渲染引擎採用了 'hasLayout' 屬性，屬性值能夠爲 true 或 false。 當一個元素的 'hasLayout' 屬性值爲 true 時，咱們說這個元素有一個佈局（layout），或擁有佈局。

看到這兒咱們就很清楚了嘛，觸發一下layout就能夠清楚浮動了嘛，因此咱們能夠對容器用如下幾種姿式來清除浮動

haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

可觸發 hasLayout 的 CSS 特性有如下幾種：
display: inline-block;
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute;
writing-mode: tb-rl;
zoom: (除 normal 外任意值)

注意：layout屬性只有IE有，而且IE6之前的版本任何的height和width都會觸發layout屬性，能夠依靠計算佈局清理浮動的 haslayout 特性僅在 IE 6/7 中存在，IE8 以後將使用 CSS 2.1 的 Block Formatting Contexts 定義來達到一樣效果。