摘要：右浮動(dòng)盒也有類似的規(guī)則與兄弟不能重疊一個(gè)浮動(dòng)盒的外不能高于其包含塊的。當(dāng)浮動(dòng)盒出現(xiàn)在兩個(gè)合并的之間時(shí)，浮動(dòng)盒的定位就像它有一個(gè)空的匿名塊父級(jí)存在于當(dāng)前流一樣。

在絕大多數(shù)Web開(kāi)發(fā)者的語(yǔ)境中，“布局”這個(gè)術(shù)語(yǔ)和“排版”是有差異的?！安季帧逼蛴谥负暧^的GUI區(qū)域劃分，比如雙欄布局或三欄布局等。從這一點(diǎn)出發(fā)，float其實(shí)本不是一項(xiàng)用于“布局”的屬性。float對(duì)應(yīng)的其實(shí)是傳統(tǒng)印刷排版中圖文混排中的環(huán)繞。

在 CSS 中，用 float 和 position 的區(qū)別是什么？

常見(jiàn)元素inline,inline-block,table-cell等等設(shè)置float屬性,都被視為塊級(jí)元素,相當(dāng)于display設(shè)置為block

如果margin-left或者margin-right的計(jì)算值為auto，它們的應(yīng)用值為0
對(duì)于非替換元素,如果width的計(jì)算值為auto，應(yīng)用值為“自適應(yīng)（shrink-to-fit）”寬度
自適應(yīng)寬度的計(jì)算與用自動(dòng)表格布局算法去算一個(gè)表格單元的寬度類似。粗略地講：通過(guò)格式化不含除顯式換行外的換行來(lái)計(jì)算首選寬度（preferred width），然后計(jì)算首選最小寬度（preferred minimum width），例如，通過(guò)嘗試所有可能的換行。CSS 2.1沒(méi)有定義準(zhǔn)確的算法。第三步，算出可用寬度（available width）：這種情況下，就是包含塊的寬度減去margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right和所有相關(guān)滾動(dòng)條的寬度的應(yīng)用值
那么自適應(yīng)寬度就是：min(max(首選最小寬度, 可用寬度), 首選寬度)
對(duì)于替換元素,width的應(yīng)用值由行內(nèi)的可替換元素決定

我們說(shuō)的包裹性,主要就是指自適應(yīng)寬度,通常情況下也就是首選寬度

特定情況下（例如，見(jiàn)上面的10.6.4節(jié)和10.6.6節(jié)），一個(gè)建立了塊格式化上下文的元素的高度按照如下規(guī)則計(jì)算：
如果它只含有行內(nèi)級(jí)子級(jí)，高度就是最高的行盒的top與最低的行盒的bottom之間的距離
如果它只含有塊級(jí)子級(jí)，高度由就是最高的塊級(jí)子級(jí)盒的top margin-edge到最低的塊級(jí)子級(jí)盒的bottom margin-edge之間的距離
此外，如果該元素含有任意bottom margin邊位于元素的content邊下方的的浮動(dòng)后代，那么高度增加至能夠包含這些邊。只考慮參與此塊級(jí)格式化上下文的浮動(dòng)，例如，不考慮絕對(duì)定位的后代中的浮動(dòng)或者其它浮動(dòng)

float包裹性展示

浮動(dòng) 在浮動(dòng)模型中，一個(gè)盒先根據(jù)常規(guī)流布局，然后從流中取出來(lái)盡可能地左移或右移。其它內(nèi)容可能會(huì)沿著浮動(dòng)（盒）的一側(cè)排列（Content may flow along the side of a float）
一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)，直到其外邊（outer edge）挨到包含塊邊或者另一個(gè)浮動(dòng)盒的外邊。如果存在行盒，浮動(dòng)盒的外top（邊）會(huì)與當(dāng)前行盒的top（邊）對(duì)齊
因?yàn)楦?dòng)（盒）不在流內(nèi)，在浮動(dòng)盒之前或者之后創(chuàng)建的未定位的（non-positioned）塊盒會(huì)豎直排列，就像浮動(dòng)不存在一樣。然而，接著（next to）浮動(dòng)（盒）創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短，為了給浮動(dòng)（盒）的margin box讓出空間
浮動(dòng)（盒）的內(nèi)容會(huì)堆疊起來(lái)，就像浮動(dòng)（盒）生成了新的層疊上下文（stacking contexts）一樣，除了所有定位的元素和實(shí)際創(chuàng)建了新的層疊上下文并參與了浮動(dòng)（盒）的父級(jí)堆疊上下文的元素。一個(gè)浮動(dòng)（盒）可以與常規(guī)流中的其它盒重疊（例如，當(dāng)一個(gè)常規(guī)流盒接著一個(gè)有負(fù)margin的浮動(dòng)（盒）時(shí)），出現(xiàn)這種情況時(shí)，浮動(dòng)（盒）會(huì)被渲染在未定位的（non-positioned）流內(nèi)塊之前，流內(nèi)行內(nèi)（盒）之后

float雖然使元素脫離了文檔流,但是它仍然占據(jù)著位置,這也是影響外部元素寬度計(jì)算的原因之一

float盒的兄弟塊盒會(huì)豎直排列,當(dāng)作float盒不存在,而兄弟行內(nèi)盒會(huì)縮進(jìn),給float讓出空間

對(duì)于float盒,如果它與常規(guī)流中的其它盒重疊,那么它會(huì)覆蓋流內(nèi)塊,并且被流內(nèi)行內(nèi)盒覆蓋

float與圖文混排

一個(gè)浮動(dòng)的盒與任何其它盒之間的margin不會(huì)合并（甚至一個(gè)浮動(dòng)盒與它的流內(nèi)子級(jí)之間也不會(huì)）

一個(gè)左浮動(dòng)盒的left外邊（outer edge）不能位于其包含塊的left邊的左邊。向右浮動(dòng)的元素也有類似的規(guī)則
float與左右邊界

如果當(dāng)前盒是向左浮動(dòng)的，并且在這之前源文檔中還有元素生成了左浮動(dòng)盒，那么對(duì)于每一個(gè)之前的盒，要么 當(dāng)前盒的left外邊在之前的盒的right外邊的右邊，要么它的top要比之前的盒的bottom低。右浮動(dòng)盒也有類似的規(guī)則
float與兄弟float排列

一個(gè)左浮動(dòng)盒的right外邊不能位于接著它的任意右浮動(dòng)盒的left外邊的右邊。右浮動(dòng)盒也有類似的規(guī)則
float與兄弟float不能重疊

一個(gè)浮動(dòng)盒的外top（outer top）不能高于其包含塊的top。當(dāng)浮動(dòng)（盒）出現(xiàn)在兩個(gè)合并的margin之間時(shí)，浮動(dòng)（盒）的定位就像它有一個(gè)空的匿名塊父級(jí)存在于（當(dāng)前）流一樣。這個(gè)父級(jí)的位置通過(guò)margin合并章節(jié)中的規(guī)則來(lái)定義
float與margin

一個(gè)浮動(dòng)盒的外top不能高于源文檔中任何在此之前的元素生成的塊盒或者浮動(dòng)盒的外top
float與塊盒,浮動(dòng)盒

一個(gè)元素的浮動(dòng)盒的外top不能高于任何含有源文檔中在此之前的元素生成的盒的行盒的top
float與行盒

左邊存在另一個(gè)左浮動(dòng)盒的左浮動(dòng)盒的right外邊不能位于其包含塊的right邊的右邊（不嚴(yán)謹(jǐn)?shù)模阂粋€(gè)左浮動(dòng)盒不能超出right邊，除非它已經(jīng)盡量向左（緊挨著包含塊的left邊）了）。右浮動(dòng)元素也有類似的規(guī)則
多個(gè)float與包含塊邊界

浮動(dòng)盒必須盡量高往高放（A floating box must be placed as high as possible）

左浮動(dòng)盒必須盡量往左放，右浮動(dòng)盒盡量往右放。更高的位置要比更左/右的位置優(yōu)先
float與高度

所以,float自身的主要原則是:浮動(dòng)元素之間不重疊；盡可能向邊緣漂浮，但不越界。

當(dāng)overflow計(jì)算值為visible時(shí)常規(guī)流中的塊級(jí)不可替換元素
只考慮常規(guī)流中的子級(jí)（即，浮動(dòng)盒和絕對(duì)定位的盒會(huì)被忽略，并且相對(duì)定位的盒不考慮其偏移）。注意子級(jí)盒可以是一個(gè)匿名塊盒

這就是float元素的父元素塌陷的原因

float與父元素塌陷

那么,float在父元素的兄弟元素上會(huì)不會(huì)起作用呢

float與父元素的非浮動(dòng),浮動(dòng)兄弟元素

這些規(guī)則里涉及的其它元素僅僅是指與浮動(dòng)（盒）處于同一個(gè)塊格式化上下文的其它元素

由于父元素跟它的兄弟元素同出于一個(gè)BFC中,所以行為規(guī)則與同處于同一個(gè)父元素之中的元素的規(guī)則相同：塊級(jí)元素重疊；行內(nèi)元素環(huán)繞；浮動(dòng)元素跟隨。

該屬性說(shuō)明了一個(gè)元素的盒的哪一邊不能與之前的浮動(dòng)盒相鄰。"clear"屬性不考慮元素自身的或者其它塊格式化上下文中的浮動(dòng)

為了解決上面的父元素高度塌陷以及父元素的兄弟元素受到子元素float影響的問(wèn)題,我們需要閉合浮動(dòng)

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{*zoom:1;} //ie 6 7

before是因?yàn)閠able類型能生成獨(dú)立的bfc，防止上邊距塌陷，

after負(fù)責(zé)清除浮動(dòng)，防止父級(jí)高度塌陷；配合使用，代碼少，效率高。

想要具體了解,請(qǐng)看一絲大大的那些年我們一起清除過(guò)的浮動(dòng),這里就不詳細(xì)寫了

回歸CSS標(biāo)準(zhǔn)之Float