什么是浮動？

view1:

1.在傳統(tǒng)的印刷布局中，文本可以按照實(shí)際需要來圍繞圖片晨另。一般把這種方式稱為“文本環(huán)繞”。在網(wǎng)頁設(shè)計(jì)中谱姓，應(yīng)用了CSS的float屬性的頁面元素就像在印刷布局里被文字包圍的圖片一樣借尿。

浮動屬性float是CSS布局的最佳利器，我們可以通過不同的浮動屬性值靈活地定位div元素屉来，以達(dá)到布局網(wǎng)頁的目的路翻。我們可以通過CSS的屬性float使元素向左或向右浮動。也就是說茄靠，讓盒子及其中的內(nèi)容浮動到文檔的右邊或者左邊茂契。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍慨绳，不過在CSS中掉冶，任何元素都可以浮動真竖。

浮動元素會生成一個(gè)塊級框，而不論它本身是何種元素厌小。

view2:

浮動層：給元素的float屬性賦值后恢共，就是脫離文檔流，進(jìn)行左右浮動璧亚，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框讨韭。

而此浮動元素在文檔流空出的位置，由后續(xù)的(非浮動)元素填充上去：塊級元素直接填充上去癣蟋，若跟浮動元素的范圍發(fā)生重疊拐袜，浮動元素覆蓋塊級元素。內(nèi)聯(lián)元素：有空隙就插入梢薪。

為何要浮動蹬铺？

我們使用float浮動做了很多其本職工作以外的事情，于是我們會混淆秉撇，我們會回看不清float真正的面目甜攀。浮動真正的意義在哪里呢？要知道這個(gè)問題的答案很簡單琐馆，假設(shè)現(xiàn)在CSS中沒有浮動(float)屬性规阀，那么會變成一個(gè)什么樣子。我們會發(fā)現(xiàn)瘦麸，目前流行采用浮動方法實(shí)現(xiàn)的無論是分欄布局谁撼，還是列表排列我們都可以用其他一些CSS屬性（不考慮table）代替實(shí)現(xiàn)，唯一一個(gè)實(shí)現(xiàn)不了的就是“文字環(huán)繞圖片”滋饲，我是想不出來能有什么方法可以讓文字環(huán)繞圖片顯示厉碟。好，這個(gè)替代不了的作用才是float真正的意義所在屠缭。此作用類似于word中的版式箍鼓，很基礎(chǔ)的原始的作用。

誰能float呵曹？

view1：

You can’t float every element on a web page. You can only float block-level elements. These are the elements that take up a block of space on the page, like images (), paragraphs (), divisions (), and lists ().

Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (), line breaks (), strong emphasis (), or italics ().

float后面的非float元素如何定位款咖？

浮動元素后邊的元素
若是非浮動行內(nèi)元素且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí)，行內(nèi)元素邊框奄喂、背景和內(nèi)容都在該浮動元素“之上”顯示铐殃。

若是非浮動塊級元素跟在浮動元素后邊且在定位后產(chǎn)生重疊時(shí)，該塊級元素邊框和背景在該浮動元素“之下”顯示跨新，只有內(nèi)容在浮動元素不在浮動元素“之下”顯示富腊。

float真的不占據(jù)文檔空間么？

1玻蝌、如果兩個(gè)div蟹肘，第一個(gè)正常词疼，第二個(gè)設(shè)為浮動俯树，是不是第二個(gè)就會覆蓋掉第一個(gè)帘腹，但實(shí)際試驗(yàn)情況不是如此，第二個(gè)div還是在第一個(gè)div的下邊顯示许饿；
2阳欲、兩個(gè)div， 第一個(gè)設(shè)為浮動陋率，第二個(gè)正常球化，顯示結(jié)果為第一個(gè)浮動div覆蓋第二個(gè)div。

因此我判斷：例1-> 第二個(gè)div設(shè)為浮動后瓦糟，確實(shí)不占據(jù)文檔空間筒愚，但是引文第一個(gè)是普通文檔，他占據(jù)了文檔流空間菩浙，浮動元素認(rèn)為上邊的文檔流都已占用巢掺，因此第二個(gè)浮動div要從下邊顯示。

例2-> 第一個(gè)div設(shè)為浮動后劲蜻，不占據(jù)文檔空間陆淀，所以第二個(gè)普通文檔會上移到第一個(gè)div的下面，因?yàn)樗徽J(rèn)為上邊有元素先嬉，所以會自動上移轧苫。
css樣式 float的理解 - 525525 - 博客園
使用float脫離文檔流時(shí)，其他盒子會無視這個(gè)元素疫蔓，但其他盒子內(nèi)的文本依然會為這個(gè)元素讓出位置含懊，環(huán)繞在周圍。而對于使用absolute positioning脫離文檔流的元素衅胀，其他盒子與其他盒子內(nèi)的文本都會無視它绢要。

為何float被過度使用？

The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

參考

CSS float 浮動屬性 - polk6 - 博客園
css中float left與float right的使用說明CSS教程CSS網(wǎng)頁制作腳本之家
CSS float浮動的深入研究拗小、詳解及拓展(一) ? 張鑫旭-鑫空間-鑫生活
float | CSS-Tricks
The Mystery Of The CSS Float Property – Smashing Magazine