float是什麼？ float屬性詳解

float是什麼？為什麼要使用float?這篇文章就跟大家介紹float是什麼，讓大家了解浮動對佈局的作用，清除浮動的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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

float是css的一個定位屬性。要了解它的目的和來源，我們可以看一下印刷設計。在列印佈局中，可以將圖像設定到頁面中，使得文字根據需要包裹它們。這通常被恰當地稱為“文本環繞”。這是一個例子：

在頁面佈局程式中，可以告知儲存文字的方塊以遵循文字環繞，或忽略它。忽略文字環繞將允許單字在圖像上方流動，就像它甚至不存在一樣。這是該圖像是頁面流的一部分（或不是）的區別。網頁設計非常相似。

在網路設計中，應用了CSS 浮動屬性的頁面元素就像列印版面配置中文字圍繞它們的圖像一樣。浮動元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素明顯不同。絕對定位的頁面元素將從網頁流中刪除，就像列印版面配置中的文字方塊被告知忽略頁面換行一樣。絕對定位的頁面元素不會影響其他元素的位置，其他元素也不會影響它們，無論它們是否相互接觸。

使用CSS在元素上設定float會發生如下：

.demo {
  float: right;			
}

float屬性有四個有效值，分別為：

left ：設定元素向左浮動；

right ：設定元素向右浮動；    

none ：預設值，設定元素不浮動；

inherit ：規定應該從父元素繼承float 屬性的值。

為什麼要使用float？

浮動也有助於在較小區域內佈局。以網頁的這個小區域為例。如果我們對我們的小頭像圖像使用float，當該圖像改變大小時，框中的文字將重排以適應：

##使用容器上的相對定位和化身上的絕對定位也可以實現相同的佈局。透過這種方式，文字將不受頭像的影響，並且無法在大小更改時重排。

為什麼要清除浮動？

float（浮動）可以讓元素從正常流中移除，並且其他元素將顯示在它旁邊，因此如果我們想要阻止後續元素向上移動（如下圖，阻止footer的上移），這就需要清除它。我們需要清除頁腳（footer）的浮動，以確保它位於兩個浮動列的下方。要解決此問題，就需要透過clear屬性來實現了。

.footer {
  clear: both;
}

clear屬性有五個有效值，分別為：

left：清除在左側浮動的元素。   

right：清除在右邊浮動的元素。   

both：清除左右兩側均浮動的元素。   

none：預設值，允許浮動元素出現在兩側。 除非從級聯中刪除clear值，否則通常是不必要的值。

inherit：設定規定應該從父元素繼承 clear 屬性的值。   

總結：以上就是這篇文章有關float相關問題的全部內容，希望對大家的學習有所幫助。

以上是float是什麼？ float屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！