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