新聞中心

讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、天峻網(wǎng)站維護(hù)、網(wǎng)站推廣。
注意:浮動(dòng)(float)屬性僅對(duì)非絕對(duì)定位的元素有效,跟隨浮動(dòng)元素的文本或行內(nèi)元素將圍繞在浮動(dòng)元素的另一側(cè),例如向左浮動(dòng)的話其它元素將圍繞在浮動(dòng)元素的右側(cè)。
float 屬性有三個(gè)可選值,如下表所示:
| 值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 默認(rèn)值,元素不浮動(dòng) |
| inherit | 從父元素繼承 float 屬性的值 |
另外,在使用 float 屬性時(shí)還需要注意以下幾點(diǎn):
- 如果設(shè)置了 float 屬性且屬性的值不為 none 時(shí),若 display 屬性的值為 inline-table,那么 display 實(shí)際會(huì)被設(shè)置為 table,若 display 的屬性值為 inline、inline-block、run-in、table-* 等值,那么 display 實(shí)際會(huì)被設(shè)置為 block,其它情況則沒有變化;
- 當(dāng)元素設(shè)置了絕對(duì)定位或者 display 屬性的值為 none 時(shí),float 屬性無(wú)效;
- 相鄰的浮動(dòng)元素,如果空間足夠它們會(huì)緊挨在一起,排列成一行。
【示例】使用 float 屬性為元素設(shè)置浮動(dòng)屬性:
浮動(dòng)指的是讓設(shè)置了 float 屬性的元素脫離正常的位置,在父元素內(nèi)容區(qū)中向左或向右移動(dòng),沒有浮動(dòng)的元素直到碰到父元素內(nèi)容區(qū)的邊界或者其它浮動(dòng)元素為止,父元素中的文本和行內(nèi)元素將環(huán)繞浮動(dòng)元素。
浮動(dòng)指的是讓設(shè)置了 float 屬性的元素脫離正常的位置,在父元素內(nèi)容區(qū)中向左或向右移動(dòng),左浮動(dòng)的元素直到碰到父元素內(nèi)容區(qū)的邊界或者其它浮動(dòng)元素為止,父元素中的文本和行內(nèi)元素將環(huán)繞浮動(dòng)元素。
運(yùn)行結(jié)果如下圖所示:
圖:float 屬性演示
清除浮動(dòng)
元素浮動(dòng)之后,會(huì)對(duì)周圍的元素造成一定的影響,為了消除這種影響您可以使用 clear 屬性來(lái)清除浮動(dòng),屬性的可選值如下:
| 值 | 描述 |
|---|---|
| left | 左側(cè)不允許浮動(dòng)元素 |
| right | 右側(cè)不允許浮動(dòng)元素 |
| both | 左右兩側(cè)均不允許浮動(dòng)元素 |
| none | 默認(rèn)值,允許浮動(dòng)元素出現(xiàn)在左右兩側(cè) |
| inherit | 從父元素繼承 clear 屬性的值 |
下面通過示例來(lái)演示一下 clear 屬性的使用:
a-box
b-box
c-box
運(yùn)行結(jié)果如下圖所示:
圖:clear 屬性演示
通過運(yùn)行結(jié)果可以看出,若為 a-box、b-box 兩個(gè)元素設(shè)置 float 屬性就會(huì)導(dǎo)致 c-box 向上移動(dòng),與 a-box、b-box 重疊在一起,此時(shí)為 c-box 添加 clear 屬性清除浮動(dòng)即可解決這一問題。
分享名稱:CSSfloat(浮動(dòng))
文章URL:http://m.5511xx.com/article/dpiepdp.html


咨詢
建站咨詢
