建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
CSS Float(浮動(dòng))
CSS float 屬性定義元素在哪個(gè)方向浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，直到該塊級(jí)框的外邊緣碰到包含框或者其他的浮動(dòng)框?yàn)橹埂?/p>
烏海網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)從2013年開(kāi)始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
什么是 CSS Float（浮動(dòng)）？
CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。
Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。
元素怎樣浮動(dòng)
元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊：
實(shí)例
img
{
float:right;
}
嘗試一下 ?
彼此相鄰的浮動(dòng)元素
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對(duì)圖片廊使用 float 屬性：
實(shí)例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
嘗試一下 ?
清除浮動(dòng) - 使用 clear
元素浮動(dòng)之后，周?chē)脑貢?huì)重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。
使用 clear 屬性往文本中添加圖片廊：
實(shí)例
.text_line
{
clear:both;
}
嘗試一下 ?
提示：如果您想要了解更多有關(guān) clear 屬性的知識(shí)，請(qǐng)?jiān)L問(wèn)本站的CSS參考手冊(cè)：CSS clear 屬性。
更多實(shí)例
為圖像添加邊框和邊距并浮動(dòng)到段落的右側(cè)
讓我們?yōu)閳D像添加邊框和邊距并浮動(dòng)到段落的右側(cè)
標(biāo)題和圖片向右側(cè)浮動(dòng)
讓標(biāo)題和圖片向右側(cè)浮動(dòng)。
讓段落的第一個(gè)字母浮動(dòng)到左側(cè)
改變樣式，讓段落的第一個(gè)字母浮動(dòng)到左側(cè)。
創(chuàng)建一個(gè)沒(méi)有表格的網(wǎng)頁(yè)
使用 float 創(chuàng)建一個(gè)網(wǎng)頁(yè)頁(yè)眉、頁(yè)腳、左邊的內(nèi)容和主要內(nèi)容。
CSS 中所有的浮動(dòng)屬性
"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允許元素周?chē)懈?dòng)元素。 | left right both none inherit | 1 |
| float | 指定一個(gè)盒子（元素）是否可以浮動(dòng)。 | left right none inherit | 1 |
相關(guān)文章
CSS 參考手冊(cè)：CSS float 屬性
新聞名稱(chēng)：創(chuàng)新互聯(lián)CSS教程：CSS Float（浮動(dòng)）
鏈接URL：http://m.5511xx.com/article/cdpoiio.html
