前端---HTML5中float屬性
相信大家許多人在剛開始做頁面佈局中使用float屬性無法把握它產生的效果,尤其是在多個div共同放置在一個容器中,因為float屬性設定而往往產生自己不想要的結果.於是在這裡給大家說說float屬性到底該如何使用.
- float:該屬性控制目標HTML元素是否浮動以及如何浮動.當通過該屬性設定某個元素浮動後,該元素將被當作block型別的盒模型處理,即相當於display屬性被設定為block.也就是說,即使為浮動元素的display設定了其他屬性值,該屬性值依然是block.浮動HTML元素將會漂浮緊緊跟隨它的前一個元素,直到遇到邊框/內填充/外邊距/或block型別的盒模型元素為止.
float屬性
可以設定兩個屬性值,分別是left屬性值和right屬性值:
- left屬性值,設定方式為:
float:left;設定該屬性可以使設定該屬性的<div...>(其他元素也可以),向上浮上一層後靠左排列(可能這句話讀者不太明白,在之後的程式碼演示中會讓大家完全理解這句話的意思) .
- float屬性值,設定方式為:
float:right;設定該屬性可以使設定該屬性的<div...>(其他元素也可以),向上浮上一層後靠右排列(可能這句話讀者不太明白,在之後的程式碼演示中會讓大家完全理解這句話的意思) .
當容器中有多個div時設定float屬性會產生什麼結果在這裡我們用程式碼示範操作一下:
<html> <head> </head> <body> <div style="width:60px;height:60px;background-color:black;"></div> <div style="width:120px;height:200px;background-color:pink"></div> <div style="width:100px;height:100px;background-color:green"></div> </body> </html>
上圖是我們定義了三個不同大小的div容器,三個div都沒有設定float屬性,我們來看看會產生什麼結果:
通過上圖可以發現三個div容器因為沒有設定float屬性,所以三個div容器豎著排列,並不一行排放,但是在日常的頁面設計中我們有時需要將多個div放在一行顯示,這時就需要設定float屬性來完成操作.
- 接下來,我們對黑色的div進行定義float:left;屬性,看看會有什麼改變:
<div style="width:60px;height:60px;background-color:black;float:left;"></div>
通過上圖我們可以發現粉紅色的div與黑色的div重疊在了一起,出現這種情況的原因是什麼呢?這時我們再回頭看前文中介紹float屬性時所說的一句話 "向上浮上一層後靠左排列" 我們再通過該圖來理解理解這句話,當黑色的div設定float屬性後,黑色div容器向上浮動一層(一個網頁是分好多層次結構的,並不是我們單一看到的平面結構,一個網頁可以擁有多個平面層,類似於三維立體的表示,只不過在我們日常瀏覽中只能看到最上面一層,類似於一個圓錐,去求它的俯檢視一樣.),然後靠左對齊.當黑色的div容器離開共有的同一平面時,粉色的div和綠色的div獨佔一層,因為這兩個div並沒有設定float屬性所以就繼續豎著排列.
在最後,我們試著將粉色的div也設定成float:left:屬性後,看看有什麼變化:
<div style="width:120px;height:200px;background-color:pink;float:left;"></div>
我們可以看到因為粉色的div設定了float屬性向上漂浮一層後,與黑色的div處於同一平面,並與黑色的div左對齊,但因為綠色的div並沒有設定float屬性與其他兩個div並沒有在同一平面,並且同黑色的div產生了重疊.
- 最後,關於float操作能引起的現象仍有許多,相信通過對以上float屬性的掌握,大家可以以此類推出出現其他現象的原因,從而修正自己的程式碼,實現自己想要的結果.