浮動到底是做什麼呢?他們是如何影響相關元素的盒模型的呢?浮動的元素與內聯元素有什麼不同呢?制定浮動元素的位置的具體規則是什麼?clear屬性是如何工作的,並且它的作用是什麼?
即使是經驗豐富的開發者也會在浮動上出錯,所以理解浮動的行為能幫你擺脫面對CSS的很多困擾。即使你認為你已經瞭解了關於浮動的所有知識,我們也會深入到你可能會學習到新知識的地步。
什麼是浮動?
在CSS中一些元素是塊級元素,他們會自動啟用新的一行。例如,如果你創建2個單獨的單詞段落元素,它們不會相互流入而會各自出現在單獨的一行。另一種元素是內聯元素,它們會與之前的內容保持顯示在「一行」。舉個例子,有個錨標籤,它可以出現在像段落這個元素之內而且不會造成任何額外的空白,也不會另起一行。
改變這種佈局模型的一種方式是使用浮動,它允許給定的元素挪動到它那一行的一側,並且其他內容向下流動。一個右浮動的元素將被推動直到它的容器的右側,並且內容會沿著它的左側向下流動,一個有浮動的元素會被挪動到左側,內容會沿著它的右側向下流動。
有一個經典的例子是當你將一張圖片放進一段落裏,並且想讓兩者並排出現而不是堆疊。首先,我們用HTML創建兩個元素:
<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>
僅僅這樣並不能出現我們想要的效果。段落元素是一個塊級元素,它會獨自佔一行,所以段落和圖片會顯示在正常的文檔流。