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

來源:互聯網
上載者:User
要介紹css的float浮動屬性,就必須先瞭解一下標準文檔流

標準文檔流:

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

HTML頁面的標準文檔流(預設布局)是:從上到下,從左至右,遇塊(區塊層級元素)換行。

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

浮動層:給元素的float屬性賦值後,就是脫離文檔流,進行左右浮動,緊貼著父元素(預設為body文本地區)的左右邊框。

float的屬性介紹:

left :元素向左浮動。

right :元素向右浮動。

浮動的特性:

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

【2】浮動的包裹性:

區塊層級元素:包裹到內容地區,不再佔滿一整行,但是還有長度,長度和內容的長度一致,並且本體依舊是區塊層級元素;

行內元素:設定浮動後會改變display屬性,使其變成區塊層級元素,並且可以設定寬高。

【3】元素浮動不會穿過padding地區

【4】浮動會使元素脫離文檔流影響別的元素。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.