關於CSS中浮動屬性的簡單介紹

要介紹css的float浮動屬性，就必須先了解標準文件流程

##標準文件流：

  在沒有css的干預下，區塊級元素獨佔一行，可以設定寬高，行內元素並排顯示，寬高自動填入。

  HTML頁面的標準文件流程(預設版面)是：從上到下，由左到右，遇塊(區塊級元素)換行。

float浮動屬性最開始的用法是實現讓目標內容被文字包裹這種在報紙上經常見到的情況，而後來大多被用來實現內容的橫向並排排列，

浮動層：給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼著父元素(默認為body文字區域)的左右邊框。

float的屬性介紹：

#left ：元素向左浮動。

right ：元素向右浮動。

浮動的特性：

【1】子級浮動導致父級高度塌陷，解決方法：1.給父級再次添加一個高度2.使用overflow：hidden

【2】浮動的包裹性：

##塊級元素：包裹到內容區域，不再佔滿一整行，但是還有長度，長度和內容的長度一致，並且本體依舊是塊級元素；

####################### #行內元素：設定​​浮動後會改變###display###屬性，使其變成區塊級元素，並且可以設定寬高。 ############【3】元素浮動不會穿過###padding###區域############【4】浮動會使元素脫離文檔流影響別的元素。 ######

以上是關於CSS中浮動屬性的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！