css float浮動詳解

css float浮動詳解

@(css float)[hasLayout|clear float|妙瞳]

css float的定義和用法

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。
若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。
註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

默認值：none；
繼承性：no；
版本：CSS1
JavaScript 語法：object.style.cssFloat="left"；

可能的值

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

簡單示例


這裏用到了float:left;咱們把 ul 元素和 a 元素浮向左浮動。

clear float

• clear float 是什麼？
  不少人習慣的把clear float 翻譯成「清除浮動」，我以爲針對咱們因爲浮動形成的問題，咱們要作的是清楚浮動所形成的影響，而不僅僅只是清除浮動，還包括閉合浮動，讓浮動不要影響其餘的元素。

• 爲何要clear float?
  之因此要clear float,並非咱們看float不爽，而是，在某些狀況下，float形成了咱們佈局上的問題，使咱們不得不去清除float帶來的影響。以下列舉一些float形成的佈局問題及clear float方法：
  代碼以及效果圖以下：
  
  
  

上述事例代表，若是內層div浮動的話，那麼在沒有給父div設置高度，padding，margin的狀況下，父的高度爲0，而咱們知道，父容器的高度能夠被內層的內容的高度撐大，這就是因爲float形成的高度塌陷問題。

假如咱們給父容器設置了高度的狀況會是如何？
代碼以及效果圖以下：



咱們發現，當給父容器設置高度時，高度不爲0，而是爲咱們設置的200px;

假如咱們給父容器設置margin和padding,狀況又是如何？
代碼以及效果圖以下：

上述事例代表,若是咱們沒有給父div設置高度，只設置padding和margin,如效果圖所示，實際上的高度等於上下border,加上上下padding，加上margin,而content的高度仍是爲0，仍是由於float的緣由，高度塌陷。

針對這種狀況，clear float方法以下:
方法一：添加新的元素標籤 ，應用 clear：both；
代碼及效果圖以下：

上述事例代表，當用clear：both;父div的高度由子層的高度撐大，content的高度變爲50px;並且padding，margin都不受影響。此方法是優缺點以下：

• 優勢：易學易用，容易掌握。
• 缺點：不符合結構和表現的分離，增長不少無用標籤，不便後期維護，故不建議 使用。

方法二：父級div定義overflow:auto/hidden;(這裏的父級div指div#wrap)
代碼與效果圖以下：

上述事例代表，經過方法二，也能夠實現效果，content的高度也變爲了50px,padding，margin都不受影響。

• 原理：
  Block Formatting Context （塊級格式化上下文）是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

在建立了 Block Formatting Context 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 'margin' 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會摺疊（collapse）。

• BFC的用處：

  非 BFC 元素，會忽略其添加 float 的子元素的高度值；其上下邊距會與子元素的邊距產生摺疊；其內、外部的float元素會對自身以及其子元素佈局產生影響。
  觸發 BFC 是解決這三個問題的有效方式。這也就是爲什麼可用overflow:hidden/auto來清除浮動等問題的緣由。

• 觸發BFC的條件：

"float"的值不是"none"
"overflow"的值不是"visible"
"display"的值是"table-cell"
"table-caption",或"inline-block"
"position"的值既不是"static"也不是"relative"

因此，使用overflow屬性來清除浮動需注意，overflow屬性共有三個屬性值：hidden,auto,visible,scroll,inherit。咱們可使用hidden和auto值來清除浮動，但不能使用visible值，這個值將沒法達到清除浮動效果，atuo和hidden兩個值都ok,並且在IE6中都須要觸發 hasLayout ，例如 zoom：1；
用overflow:auto;方法的優缺點以下：

• 優勢：符合結構和表現分離，代碼量極少 。
• 缺點：多個嵌套後，firefox某些狀況會形成內容全選，不建議使用。
  用overflow:hidden;方法的優缺點以下：
• 優勢：符合結構和表現分離，代碼量極少 。
• 缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素,影響佈局，不建議使用。

方法三：父元素也設置浮動
代碼與效果以下：

• 優勢：符合結構和表現分離，代碼量極少 。
• 缺點：使得與父元素相鄰的元素的佈局會受到影響，一直找父容器來float,層層往上找，不推薦使用 。並且與margin:0 auto;水平居中衝突。
  方法四：使用 br標籤 （br中的 clear="all" ）
  這個方法有些小衆，br 有 clear=「all | left | right | none」 屬性 ；
  代碼與效果以下：
  
  
• 優勢：比空標籤方式語義稍強，代碼量較少
• 缺點：可是也不符合語義化，違背告終構與表現的分離。建議不要使用。
  方法五：父元素設置display:table；或者設置display:inline-block;
  代碼與效果以下：
  
  
  
  
  
  
• 優勢：結構語義化徹底正確，代碼量極少
• 缺點：display:table；盒模型屬性已經改變，由此形成的一系列問題。建議不使用。display:inline-block;不能設置 margin:0 auto;

方法五：使用:after 僞元素
須要注意的是 :after是僞元素（Pseudo-Element），不是僞類（某些CSS手冊裏面稱之爲「僞對象」）。
因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
該方法源自於: How To Clear Floats Without Structural Markup http://snipplr.com/view/86/clear-floats-without-structural-markup/
代碼及結果以下：

• 優勢：結構和語義化徹底正確,代碼量居中 。
• 缺點：複用方式不當會形成代碼量增長。
  樣式也能夠這樣寫：
  .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  .clearfix {display: inline-block;} /* for IE/Mac /
  
  
  因爲IE/Mac市場佔有率低，能夠精簡爲：
  .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
  .clearfix { zoom:1; }
  代碼及效果圖以下：
  
  
  
  其中clear:both;指清除全部浮動；content: '.'; display:block;對於FF/chrome/opera/IE8不能缺乏，其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清除浮動。
  在寫HTML代碼的時候，發如今Firefox等符合W3C標準的瀏覽器中，若是有一個DIV做爲外部容器，內部的DIV若是設置了float樣式，則外部的容器DIV由於內部沒有clear，致使不能被撐開。
  這個clearfix的CSS使用了after這個僞對象，它將在應用clearfix的元素的結尾添加content中的內容。在這裏添加了一個句號"."，而且把它的display設置成block；高度設爲0；clear設爲both；visibility設爲隱藏。這樣就達到了撐開容器的目的。這裏解釋下：
  CSS content 屬性

• 定義和用法
  content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容。
  說明
  該屬性用於定義元素以前或以後放置的生成內容。默認地，這每每是行內內容，不過該內容建立的框類型能夠用屬性 display 控制。

  默認值： normal
  繼承性： no
  版本： CSS2
  JavaScript 語法： object.style.content="url(beep.wav)"

  值
  none
  normal
  content specifications
  inherit 規定應該從父元素繼承 content 屬性的值。

具體能夠參考連接：http://www.w3school.com.cn/cssref/pr_gen_content.asp