摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動(dòng)。

?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正。

?回憶一下我們一般什么時(shí)候會(huì)想用浮動(dòng)呢？是多列布局還是多列布局呢:)？其實(shí)它向往的卻是這個(gè)

?它想干的就是這個(gè)——文字環(huán)繞，而且CSS2中除了浮動(dòng)外沒有其他屬性可實(shí)現(xiàn)上述的效果。
?那到底如何理解它的實(shí)現(xiàn)原理呢？下面我們采取分步剖析的方式來深入探討吧！

"float"
Value:      left | right | none | inherit
Initial:      none
Applies to:      all
Inherited:      no
?當(dāng)設(shè)置float:left后，元素對(duì)應(yīng)的margin left edge會(huì)盡可能向所屬的containing block的左邊框靠近，若同一行中存在位于左側(cè)的元素設(shè)置了float:left，則即會(huì)盡可能向該兄弟元素的margin right edge靠近.

(由于float:left突出不了效果，因此采用float:right作例子。其中藍(lán)色區(qū)域就是containing block范圍，綠和紅色塊采用向右浮動(dòng))
?當(dāng)設(shè)置浮動(dòng)后，display:inline的實(shí)際值將被改寫為display:block，因此不要再為display:inline;height:100px;line-height:0;float:left導(dǎo)致盒子content height為100px感到驚訝了。也不要為即使剩余空間不足以存放整個(gè)display:inline;float:left盒子，導(dǎo)致整個(gè)盒子下移到下一行排版而驚訝了.（若為Normal flow則會(huì)根據(jù)white-spacing、word-wrap和word-break決定盒子內(nèi)部分內(nèi)容換行，而不是整個(gè)盒子換行）簡單來說并不是float:left讓盒子具有不為五斗米折腰的氣質(zhì)，而是display:block的功勞，又由于浮動(dòng)的盒子會(huì)以水平方向排版，因此我們可以以display:inline-block來理解浮動(dòng)定位的水平排版和換行行為。

  I"m span
  I"m span too

?當(dāng)設(shè)置浮動(dòng)后，雖然display的實(shí)際值為block但就width:auto而言，我認(rèn)為display更像是采用inline-block，寬度由子元素決定。這就是包裹性了！
(float:right同理，只是方向不同而已)
注意：在僅考慮浮動(dòng)元素本身的前提下，float:left的效果與display:inline-block而父容器direction:ltr的效果是一樣的，不同的是浮動(dòng)元素不納入父容器高度的計(jì)算當(dāng)中

  float:left





  float:none

?用割裂的方式理解float并不難，難就難在結(jié)合Normal flow看Float。下面我們一起來探討吧！警告，前方高能，前方高能??！

?不管是Absolute positioning還是Float均以Normal flow作為定位基礎(chǔ)，也就是說先假設(shè)有一個(gè)虛擬盒子以Normal flow進(jìn)行定位，然后在這個(gè)基礎(chǔ)上添加Float的特性并影響其他盒子的布局。而浮動(dòng)定位對(duì)于盒子自身而言僅影響其在水平方向上的定位，因此對(duì)于inline-level box而言其垂直方向上的定位并沒有發(fā)生變化，而對(duì)于block-level box而言因Collapsing margins的失效有可能會(huì)引起垂直方向上的移動(dòng)。

float:left

?值得注意的是，浮動(dòng)定位的虛擬盒子實(shí)際上是不占空間的。因此才有后續(xù)的浮動(dòng)閉合和清除浮動(dòng)的事。

?文字環(huán)繞很明顯就是活生生地把文字向兩邊擠，為"大哥"留下個(gè)位置，而且小弟們不要走太遠(yuǎn)，必須時(shí)刻擁護(hù)著大哥。那大哥是如何圈住小弟們的呢？那得借助外力——line box。文字是以字形(glyph)的形式渲染，和它同一行的inline-level boxes均位于同一個(gè)line box中。而line box可謂是夾在containing block和浮動(dòng)盒子之間勉強(qiáng)生存。

These days it takes a diverse and complex collection of components to power a web browser. It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”.

?若line box的寬度不足以容納glyph和inline-level boxes時(shí)，會(huì)在下方產(chǎn)生N個(gè)新的line boxes并在必要時(shí)拆分inline-level boxes，然后將glyph和inline-level boxes分布到各行的line boxes當(dāng)中。

?相對(duì)line box，block-level box就顯得不屈不撓了。width:auto時(shí)其寬度始終保持占滿containing block寬度的態(tài)度。但位于同一個(gè)stacking context中的浮動(dòng)定位的盒子雖然和常規(guī)流中的盒子擁有相同的z-index(都是auto)，但浮動(dòng)定位的盒子擁有額外的優(yōu)先級(jí)，導(dǎo)致它總位于常規(guī)流中的盒子之上。（關(guān)于分層顯示的內(nèi)容可參考《CSS魔法堂：你真的理解z-index嗎？》）

float:left

?同樣是盒子，為啥你就可以在我上面呢？你有Float罩著，我也找弄個(gè)新的BFC來跟你抗衡。我們知道通過float:left|right或position:absolute|fixed或display:inline-block|table-cell|table|table-caption或overflow:auto|scroll|hidden均可讓盒子產(chǎn)生新的BFC。而產(chǎn)生BFC的盒子間天生排斥彼此。(但可通過后天的努力position:relative讓他們又互有交集^_^)
?那現(xiàn)在的問題是采用Normal flow定位模式的會(huì)產(chǎn)生新的BFC的盒子到底是緊跟在Float定位盒子的后面，還是另起一行呢？答案是兩者都有可能，具體看剩余的寬度是否足以容納該盒子。其實(shí)就是如同設(shè)置父容器產(chǎn)生BFC，而該盒子采用Float定位模式。不信，你看

float:left

?我想各位都看過各種版本的clearfix實(shí)現(xiàn)，而最簡單粗暴的方式就是添加一個(gè)

?就是讓height:auto的父容器包裹所有子元素，包括Float定位的子元素。方式很簡單，就是好讓父容器產(chǎn)生BFC。

?就是為浮動(dòng)影響的范圍劃邊界。方式也很簡單，就是以一個(gè)clear:left|right|both的盒子作為邊界即可，其實(shí)就是引入空隙(clearance)。
?首先clear屬性僅對(duì)block-level box有效，clear:left表示盒子的margin-left-edge不與浮動(dòng)盒子接觸，而clear:right表示盒子的margin-right-edage不與浮動(dòng)盒子接觸，clear:both自然是左右兩條margin-edge均不與浮動(dòng)盒子接觸啦。有點(diǎn)虛，直接看療效吧！

float:left
clear:left
float:right
clear:right

?簡單地說就是float:left用clear:left來清除，float:right用clear:right來清除。而我們會(huì)發(fā)現(xiàn)一個(gè)怪異的現(xiàn)象，那就是設(shè)置clear:left|right|both的盒子的border top edge緊接著Float定位盒子的margin bottom edge，其實(shí)這是clearance來作祟。當(dāng)設(shè)置clear:left|right|both的盒子A的border top edge與Float定位盒子B的margin box重疊時(shí)，那么就會(huì)在A的margin box和border top edge之間引入clearance，恰好讓A的的border top edge恰好不與B的margin bottom edge重疊。

?不管是浮動(dòng)閉合也好，清除浮動(dòng)也罷，我們的目的往往是兩者結(jié)合——Float定位的范圍與Normal flow定位的范圍分明，且采用Normal flow的父容器包裹所有子元素。那么可歸結(jié)為Normal flow的父容器包裹所有子元素。因此得到如下的HTML Markup

而具體的方案如下：
方案1

.clearfix::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

偽元素after表示創(chuàng)建一個(gè)display:block，innerText是content屬性值的元素作為該元素的最后一個(gè)子元素。注意content屬性值不能為空白，否則無法清除浮動(dòng)。
方案2

.clearfix::after{
  content: "u200B"; /*通過零寬空白字符，省略visibility屬性*/
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix{
  *zoom: 1; /*for IE5.5/6/7*/
}

注意：若頁面不是采用UTF-8編碼方式，那么u200B表示的將不是零寬空白字符，從而導(dǎo)致方案2出問題。
方案3
由Nicolas Gallagher大濕提出的

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

這里有2個(gè)奇妙的地方：

通過display:table讓即使content為空白時(shí)，也能獨(dú)占據(jù)一行，且高度為0;(原理是display:table會(huì)生成一個(gè)block-level box包裹著偽元素after)

通過偽元素before消除父容器margin-top與第一個(gè)Normal flow的子元素的margin-top產(chǎn)生margin collapsing效果。

?我們可以通過position屬性來設(shè)置Normal flow或Absoluting positioning，但卻要通過float屬性來設(shè)置Float，這讓我一度懷疑Float到底是不是定位模式的一員呢？
?我是這樣理解的，Normal flow（包括Relative positioning）與Absoluting positioning是非我即你的關(guān)系，而Float和Relative positioning則是可疊加影響定位效果的關(guān)系，顯然必須另設(shè)一個(gè)屬性來設(shè)置更恰當(dāng)。

?有沒有發(fā)現(xiàn)通過float:left|right我們僅能得到要么圖片靠左要么圖片靠右的文字環(huán)繞效果，那如果我們希望得到如下的四周環(huán)繞的效果呢？

?雖然已有案例是通過absolute positioning模擬出類似的效果，但布局排版固定導(dǎo)致無法適應(yīng)大部分場景。如果有個(gè)float:both屬性值那該多好??！另外大家是否覺得以下的環(huán)繞效果更有藝術(shù)范呢？

?聽說通過CSS3的shapes特性可以實(shí)現(xiàn)四周環(huán)繞和上面非四四方方的環(huán)繞效果，日后好好研究研究！
2016/04/19補(bǔ)充-參考《CSS網(wǎng)站布局實(shí)錄-基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)指南（第2版）》的5.2.2 不規(guī)則文字環(huán)繞

初中時(shí)候語文老師說我會(huì)是個(gè)寫作天才，因?yàn)槲覍懙臇|西足夠真實(shí)，取材身邊，造句簡單，用語文書墊桌腳的同時(shí)翻爛了韓寒的1988，那時(shí)督促我已經(jīng)成為她的習(xí)慣。時(shí)至今日再次遇見語文老師時(shí)候我慚愧的告訴她我已經(jīng)不寫文了，也沒有像她說的那樣成為一個(gè)天才，我只能微微一笑告訴她我至少還沒停下筆。

重構(gòu)了幾次總算寫完了，想寫得清楚而又不哆嗦真心不易，繼續(xù)努力:)
尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來自：http://www.cnblogs.com/fsjohnhuang/p/5375753.html^_^肥子John

KB011: 浮動(dòng)(Floats)
KB009: CSS 定位體系概述
CS001: 清理浮動(dòng)的幾種方法以及對(duì)應(yīng)規(guī)范說明
CSS float浮動(dòng)的深入研究、詳解及拓展(一)
CSS float浮動(dòng)的深入研究、詳解及拓展(二)
https://www.w3.org/TR/CSS2/visuren.html#flow-control
CS001: 清理浮動(dòng)的幾種方法以及對(duì)應(yīng)規(guī)范說明
Faking ‘float: center’ with Pseudo Elements
說說標(biāo)準(zhǔn)——CSS核心可視化格式模型(visual formatting model)之十：控制緊接浮動(dòng)的排列-clear 特性
那些年我們一起清除過的浮動(dòng)