【總結】我所整理的float, inline-block還有position:absolute

時間 2019-11-20

標籤總結整理 float inline block 還有 position absolute 欄目 CSS 简体版

原文原文鏈接

這篇主要寫了一下幾個知識點：css

浮動和inline-block的概念和選擇
浮動和position:absolute對於脫離文檔流的區別
這篇文章參考了一下幾個連接：
https://www.zhihu.com/question/24529373/answer/29135021
http://www.w3cplus.com/css/inline-blocks.html

感謝大家的無私分享以及鑽研的精神。

浮動最先是用來實現文字環繞圖片用的，而不是像如今不少地方用來砌磚頭用。html

inline-block 的元素web

具備block元素能夠設置寬高的特性;
具備 inline 元素默認不換行的特性;
能夠設置 vertical-align 屬性

浮動和inline-block有共同的特色就是包裹性也就是說，它能
1）讓元素排成一排
2）讓inline的元素支持寬高
3）讓塊元素在不設置寬高時內容撐開寬高
可是inline-block並不會讓元素脫離文檔流chrome

inline-block和float的區別
雖然設置浮動跟設置inline-block有些特徵相似，但二者的區別仍是很是明顯的:windows

文檔流（Document flow）:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。所以設置inline-block不須要清除浮動。固然，周圍元素不會環繞這個元素，你也不可能經過清除inline-block就讓一個元素跑到下面去。
水平位置（Horizontal position）：很明顯你不能經過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。可是父元素內元素若是設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這仍是由於浮動元素脫離文檔流的關係）。
垂直對齊（Vertical alignment）：inline-block 元素沿着默認的基線對齊。浮動元素緊貼頂部。你能夠經過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要緣由。
空白（Whitespace）：inline-block包含html空白節點。若是你的html中一系列元素每一個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
IE6和IE7：Ie67對此屬性部分支持。若是你要兼容這些瀏覽器，必須解決這個問題。這不是個大問題，但值得留意一下。

display:inline-block; /* 現代瀏覽器 +IE六、7 inline 元素 */

*display:inline; /* IE六、7 block 元素 */

*zoom:1; //觸發ie下的hasLayout

display:inline-block後的元素爲何會產生水平空隙，這真的是bug嗎？這麼一個神奇的屬性，爲什麼你們一直避而遠之呢？這恐怕還得從 inline-block 元素之間產生的水平空隙（間隙）提及吧。
看看 inline 元素默認的表現狀況如何？原來默認就有空隙存在！它們是誰？是空白符（white space）！
那麼爲什麼 IE六、7block元素沒有產生空隙呢？其實前面也提到了IE的hasLayout，具備獨立性，因此產生 hasLayout的元素之間表現出來互不影響。瀏覽器

解決換行解析的最終代碼
其實網上有不少辦法，下面只是列舉，可是隻貼最終的代碼字體

刪除html中的空白,就是不換行；
使用負邊距；
給父元素設置font-size:0

其實font-size:0是最好的解決方案，可是還用到了不少兼容補救
這裏還有一個問題須要注意的是：因爲 inline-block 具備 inline 元素的特性，在垂直方向上不少時候咱們並不但願元素以vertical-align:baseline方式來呈現，因此在「.dib-wrap」中統一重置爲「vertical-align:top」便可。url

.dib-wrap { //這是針對父級的類

font-size:0;/* 全部瀏覽器 */

*word-spacing:-1px;/* IE六、7 */

}

.dib-wrap .dib{ 針對使用display:inline-block的元素

font-size: 12px; //這個給要加inline-block的元素單獨設置字體

letter-spacing: normal;

word-spacing: normal;

vertical-align:top;

}

@media screen and (-webkit-min-device-pixel-ratio:0){

/* firefox 中 letter-spacing 會致使脫離普通流的元素水平位移 */

.dib-wrap{

letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器, N 根據父級字體調節*/

}

.dib { //這個是display的通用寫法

display: inline-block;

*display:inline; //ie6,7下用hack，將塊元素轉成inline後直接使用zoom:1觸發ie的hasLayout

*zoom:1;

}

話說這個版本還考慮到了safari5.1.7裏不letter spacing負值的絕對值大於空隙大小後，會致使元素總體位置向右偏移，以及chrome低版本下不支持font-size:0；我本身搞了個最簡單的版本，由於safari6.0開始不支持windows了，也不知道怎麼測兼容性，因此下面這個版本只考慮了新版chrome，firefox，以及ie6+以上。spa

#one,#two{ //父級

font-size: 0;

*word-spacing: -1px;

vertical-align: top;

}

#one span,#two div{

display: inline-block;

*display: inline;

*zoom: 1;

font-size: 14px;

border: 1px solid black;

padding: 10px;

}

什麼時候用float，什麼時候用inline-block?firefox

若是你須要文字環繞容器，那浮動是不二選擇。若是你須要居中對齊元素，inline-block是個好選擇。
使用inline-block：當你須要控制元素的垂直對齊跟水平排列時，使用inline-block。
使用浮動：當你須要讓元素環繞某一個元素時，或者須要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

上圖，把一系列元素設置了浮動，由於盒子二號寬度的關係，能夠發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

浮動、inline-block和圖像排列
若父元素中的圖片等高，設置浮動就會工做正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是由於浮動後，圖片脫離了文檔流。而inline-block因爲未脫離文檔流，不會出現這個問題。若是你想再建立一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時須要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。

這裏有個更明顯的例子來體現inline-block跟float的區別：

上面的塊級元素被設置了inline-block。因爲他們沒有脫離文檔流，因此元素不會被某個過長的列擠上來。

談一下float和position:absolute對於脫離文檔流的關係
我主要是看了知乎上張秋怡的回答，原文地址以下：
https://www.zhihu.com/question/24529373/answer/29135021

雖然它們都能使元素脫離文檔流，可是它們有個最大的區別，float後，其餘元素當它不存在是沒錯，可是其餘元素裏的文字缺依然當它存在，而且被擱在外面，以下面這個float:left例子：

#one{

float: left;

width: 100px;

height: 100px;

background: deepskyblue;

}

#two{

width: 200px;

height: 200px;