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

2021-08-20 20:17:12 字數 2099 閱讀 1610

寫在前面:附一篇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.這樣就可以實現這個效果了;**如下所示:

class="a">

class="b">

div>

class="c">

div>

div>

* html,body

.a.b

.c

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...