這篇文章主要介紹css中float屬性有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有福安免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

首先我們來了解一下float是什么？

float是css的一個(gè)定位屬性。要了解它的目的和來源，我們可以看一下印刷設(shè)計(jì)。在打印布局中，可以將圖像設(shè)置到頁面中，使得文本根據(jù)需要包裹它們。這通常被恰當(dāng)?shù)胤Q為“文本環(huán)繞”。這是一個(gè)例子：

在頁面布局程序中，可以告知保存文本的框以遵循文本環(huán)繞，或忽略它。忽略文本環(huán)繞將允許單詞在圖像上方流動(dòng)，就像它甚至不存在一樣。這是該圖像是頁面流的一部分（或不是）的區(qū)別。網(wǎng)頁設(shè)計(jì)非常相似。

在Web設(shè)計(jì)中，應(yīng)用了CSS 浮動(dòng)屬性的頁面元素就像打印布局中文本圍繞它們的圖像一樣。浮動(dòng)元素仍然是網(wǎng)頁流的一部分。這與使用絕對(duì)定位的頁面元素明顯不同。絕對(duì)定位的頁面元素將從網(wǎng)頁流中被刪除，就像打印布局中的文本框被告知忽略頁面換行一樣。絕對(duì)定位的頁面元素不會(huì)影響其他元素的位置，其他元素也不會(huì)影響它們，無論它們是否相互接觸。

使用CSS在元素上設(shè)置float會(huì)發(fā)生如下：

.demo {
  float: right;			
}

float屬性有四個(gè)有效值，分別為：

left ：設(shè)置元素向左浮動(dòng)；

right ：設(shè)置元素向右浮動(dòng)；

none ：默認(rèn)值，設(shè)置元素不浮動(dòng)；

inherit ：規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

為什么要使用float？

浮動(dòng)也有助于在較小區(qū)域內(nèi)布局。以網(wǎng)頁的這個(gè)小區(qū)域?yàn)槔?。如果我們?duì)我們的小頭像圖像使用float，當(dāng)該圖像改變大小時(shí)，框中的文本將重排以適應(yīng)：

使用容器上的相對(duì)定位和化身上的絕對(duì)定位也可以實(shí)現(xiàn)相同的布局。通過這種方式，文本將不受頭像的影響，并且無法在大小更改時(shí)重排。

為什么要清除浮動(dòng)？

float（浮動(dòng)）可以讓元素從正常流中移除，并且其他元素將顯示在它旁邊，因此如果我們想要阻止后續(xù)元素向上移動(dòng)（如下圖，阻止footer的上移），這就需要清除它。我們需要清除頁腳（footer）的浮動(dòng)，以確保它位于兩個(gè)浮動(dòng)列的下方。要解決此問題，就需要通過clear屬性來實(shí)現(xiàn)了。

.footer {
  clear: both;
}

clear屬性有五個(gè)有效值，分別為：

left：清除在左側(cè)浮動(dòng)的元素。

right：清除在右側(cè)浮動(dòng)的元素。

both：清除左右兩側(cè)均浮動(dòng)的元素。

none：默認(rèn)值，允許浮動(dòng)元素出現(xiàn)在兩側(cè)。 除非從級(jí)聯(lián)中刪除clear值，否則通常是不必要的值。

inherit：設(shè)置規(guī)定應(yīng)該從父元素繼承 clear 屬性的值。

以上是“css中float屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

新聞標(biāo)題：css中float屬性有什么用-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/ecoji.html