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