float是什麼？ float屬性詳解

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

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

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

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

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

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

.demo {
  float: right;			
}

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

left ：設定元素向左浮動；

right ：設定元素向右浮動；    

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

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

為什麼要使用float？

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

為什麼要清除浮動？

.footer {
  clear: both;
}

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