float對內聯元素和塊元素的影響

寫在前面：附一篇w3s的關於css float的講解：

float屬性還沒有徹底了解，因為遇到了float之後會導致width自適應最小化的問題，然後又偶然發現float的內聯元素可以自己設定寬高，內外邊距等屬性了。

當該屬性(display)不等於none引起物件浮動時，物件將被視作塊物件(block-level)，即display屬性等於block。也就是說，浮動物件的display特性將被忽略。float在絕對定位和display為none時不會被應用。對應的指令碼特性為stylefloat（ie）或cssfloat（非ie）。(注意這裡為stylefloat或cssfloat，而不是float)

因為只有塊元素才會有物理屬性，在css世界裡邊，有三種形態的東西，

1. 塊元素。　特性：有物理屬性，width,height寫值起作用，而且要佔據一行。

2. 內聯元素。 特性：沒有物理屬性。但是margin，padding值有用。不佔據一行，後邊可以有兄弟元素。

3. 即是塊又是內聯，根據兄弟兄弟元素決定。

為什麼是float之後才會有物理屬性，這就是塊與內聯元素相互轉化的問題。

塊元素 -> 內聯元素：　display:inline;

內聯元素 -> 塊元素：　display:block;

float就是隱性的把內聯元素轉化為塊元素，這是對內部的特性就是有物理特性，但是他不佔據一行。對外是內聯元素的屬性。他有個壞處就是會影響兄弟元素。相當於：display:inline-block;

那為什麼不直接display:inline-block;因為這個玩意有幾個px的bug。

二、對於塊元素float之後的改變（其實和內聯元素一樣，相當於變成了：inline-block元素，最明顯的是寬度自適應發生了變化）

一直以為float屬性不會對div的寬度或高度有什麼影響.但是,這兩天我發 現在float對div寬度的影響是顯著的.

首先div的預設寬度是width:auto;意思是自動調整寬度.

在不帶float的情況下,div的寬度會自動調整至最大化,而在帶float的情況下則正好相反,它會自動調整至最小化.

測試如下:

sssdiv>

sssdiv>

這個可能是為了clear而設定

第二div的預設高度也是height:auto.帶不帶float的div都一樣,都是自動調整至最小化

第三div帶float時,只要寬度不超過網頁寬度,則其它元素包括div都要環繞它.或者也可以認為此時的帶float的div是乙個特殊的 padding

float對內聯元素和塊元素的影響

寫在前面 附一篇w3s的關於css float的講解 float屬性還沒有徹底了解，因為遇到了float之後會導致width自適應最小化的問題，然後又偶然發現float的內聯元素可以自己設定寬高，內外邊距等屬性了。當該屬性 display 不等於none引起物件浮動時，物件將被視作塊物件 block...

float對內聯元素和塊元素的影響

寫在前面 附一篇w3s的關於css float的講解 float屬性還沒有徹底了解，因為遇到了float之後會導致width自適應最小化的問題，然後又偶然發現float的內聯元素可以自己設定寬高，內外邊距等屬性了。當該屬性 display 不等於none引起物件浮動時，物件將被視作塊物件 block...

float定位對內聯元素和塊狀元素的影響

寫在前面 附一篇w3s的關於css float的講解 float屬性還沒有徹底了解，因為遇到了float之後會導致width自適應最小化的問題，然後又偶然發現float的內聯元素可以自己設定寬高，內外邊距等屬性了。當該屬性 display 不等於none引起物件浮動時，物件將被視作塊物件 block...