對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

結語

本篇文章涉及到hasLayout,BFC等，這里由於水平有限就不一一講了，等研究研究在另外開篇探討喲。
今天就寫到這里了，假如有錯誤的地方，歡迎大家指出喲，謝謝！-----妙瞳