对css float 浮动的学习心得
css float浮動詳解
@(css float)[hasLayout|clear float|妙瞳]
css float的定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
可能的值
值 描述 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等，這里由于水平有限就不一一講了，等研究研究在另外開篇探討喲。
今天就寫到這里了，假如有錯誤的地方，歡迎大家指出喲，謝謝！-----妙瞳
轉載于:https://www.cnblogs.com/WebShare-hilda/p/4693095.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的对css float 浮动的学习心得的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode:892. 三维形体的表
- 下一篇： （软件工程复习核心重点）第四章总体设计习