dispaly、position、float之間的關係與相互作用

一、首先看一下這三個屬性

display屬性規定元素生成框的型別。較為常見的有none-預設值（用於隱藏元素，元素會消失於視界和文件流中），block-塊級元素，inline-block-行內塊級元素，list-item列表樣式塊級元素……….（display種類很多，可查閱資料www.w3school.com.cn/cssref/pr_c…）

position屬性規定元素的定位型別，常用於佈局。static-預設值，元素出現在正常文件流中（此時不受top、left、right、bottom、z-index等屬性影響）；absolute-絕對定位，脫離文件流，相對於它第一個非static父元素進行定；fixed-固定定位，相對於瀏覽器視窗進行定位；relative生成相對定位的元素，相對於其正常文件流中的位置進行定位。

float屬性，定義一個元素浮動方向，最初用於影象使文字環繞，現在是一種佈局方式。不論浮動元素本身是何種框型別，浮動後會生成一個塊級框。

二、三種屬性的相互作用關係

這三種屬性之間的關係和相互作用效果可以用下圖表示：

display轉換對應表：

1.display值為none

當元素display值為none時，元素不產生框，float和position都不起作用。

2.position是absolute或fixed

當元素display值不為none，而position是absolute或者fixed時，此時float不起作用，計算值也為none（原文中有計算方法，這裡略去），display值會按上表設定。元素框的位置由top、left、right、bottom值和其父元素決定。

3.float值不為none

當元素有了浮動屬性（float不為none，是left或right）後，該框浮動且display值會按上表轉換。例如，span是行內元素，設定浮動後會變為塊級元素。

4.元素為根元素

如果元素是根元素，設定的display也會按上表進行轉換。否則，元素的display值為指定值或預設值。

參考

https://www.cnblogs.com/adventureofraindrop/p/6215411.html

http://www.cnblogs.com/jackyWHJ/p/3756087.html