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;因為這個玩藝在ie6下有幾個px的bug。

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

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

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

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

測試如下:

"background-color:#0099ff;">sss
"background-color:#ff0000; float:left;">sss

這個可能是為了clear而設定

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

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

測試如下:

"background-color:#0099ff;">sss
"background-color:#ff0000; float:left;">sss
"background-color:#0099ff;">sss
"background-color:#ff0000; float:left; width:100%;">sss
"background-color:#0099ff;">sss
"background-color:#0099ff;">sss
"background-color:#ff0000; float:left; width:100px; height:50px;">sss
ssssssssssssss
sssssssssssssssss
ssssssssssssss

從以上你或者已經知道了乙個重要的div+css的布局方法:

左右分開的網頁,左側的寬度固定,右側的寬度隨解析度自動適應,並佔滿右側的空間.

方法就是左側的div用float:left.而右側的div不帶float.這樣就可以實現這個效果了.

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

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

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

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

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

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

相關推薦