讓css初學者抓狂的屬性float

掙扎了很久，始終沒有決定要不要寫博客，內心有幾個顧慮一是我是小白，我寫的文章有沒有人看？二是我是小白，我寫的文章假如存在諸多錯誤，理解的不對發表上去再去誤導別人。三是寫一篇文章費時費力。可是我如今想明白了，我不寫技術大牛的文章，就寫菜鳥的學習型文章。我寫文章是爲了我本身，不是爲了別人。有錯誤正好別人提出改正。

寫文章有幾個好處，一來能夠理清思緒，對於我這個思惟混亂的人來講是再好不過的方法了，二來能夠記錄學習知識，方便之後忘記了能夠回來看看。三是已積累起來的文章可讓本身頗有成就感。

文章可能是學習別人文章的總結和本身的我的看法，因此實際上有些認識多是不許確的，歡迎大神們指點，也歡迎交流。

 

Float屬性是css必會屬性之一，可是它看上去簡單，卻有很深的奧義。看了張鑫旭的兩篇文章，對於float的理解提升了一個層次。

http://www.zhangxinxu.com/wordpress/?p=583 CSS float浮動的深刻研究、詳解及拓展(一)

http://www.zhangxinxu.com/wordpress/?p=594 CSS float浮動的深刻研究、詳解及拓展(二)

如下是我對於他的文章寫的我的總結和一些認識。

 

再講float屬性以前，必需要知道高度的概念和display：inline-block的包裹性

高度由兩個css模型產生：

一個是box模型（content的height+padding+margin），這個是最基礎的你們應該都是知道；

一個是line box模型（line-height，內部的最高部分決定），這個裏面就很深奧，讓我學習了一番。

 

 

還要說一下display：inline-block的包裹性，即設置了這個屬性，該元素擁有block的屬性能夠設置寬和高了，也用擁有了行內元素的屬性，寬和高將根據內容自適應。這裏強調的是他後面的屬性根據內容自適應寬和高的特性。

通常狀況下一個塊級元素，沒有設置display：inline-block這個屬性，元素也沒有設置寬度的話，元素的寬應該是繼承父元素的寬度，若是是行內元素，沒有設置display：inline-block這個屬性，它的寬度和高度是由內容自適應，可是設置高度和寬度是無論用的。

 

 

display：inline-block結合了行內和塊級元素，你不設置寬高，我就按內容自適應，你設置了我就按你設置的走。

 

那麼下面咱們來講浮動（float）

1、浮動的本質是用來文字環繞的，像分欄佈局和列表排列均可用其它屬性實現。

2、浮動是一個帶有方位的display：inline-block；因此設置浮動，就會有默認的display：inline-block；這個屬性。不須要再寫display了；設置display：inline-block帶來的各類效果，好比高寬自適應而不是繼承父元素寬。能夠設置高和寬。他的先後不會像塊級元素默認換行（可是它沒有高度）。

3、浮動會破壞inline-box，產生兩個結果。①（無inlinebox->無line-box->無高度）。②圖片與文字沒法同行顯示。這兩個結果偏偏是文字環繞的所必需的。

 

實踐與解釋

 

文字多了，你看就是所謂的環繞效果吧

 

 

Float：left|right;與position：absolute;的一些區別

Float：left|right;屬性與position：absolute屬性都具備包裹性，二者都會使元素脫離文檔流，可是，與absolute不一樣的是：float 的元素還會在文檔流上佔據一個位置。position:absolute的元素是根據最近的非static的父元素定位，若是沒有，則根據最初的包含塊定義（通常是body），關於float，也會脫離文檔流，會被放置在其容器的左邊或右邊。

關於下列問題

1關於li標籤水平排列等一系列float應用及原理

2浮動會破壞本身，影響別人

①   浮動產生bug的緣由

②   清楚浮動的方法與本質

3浮動佈局的替代效果

尚未具體學習等學習以後再好好總結。