淺談CSS浮動屬性
阿新 • • 發佈：2017-05-30
情況 了解 特性 影響 並排 添加 float 下標 左右
要介紹css的float浮動屬性，就必須先了解一下標準文檔流
標準文檔流：
在沒有css的幹預下，塊級元素獨占一行，可以設置寬高，行內元素並排顯示，寬高自動填充。
HTML頁面的標準文檔流(默認布局)是：從上到下，從左到右，遇塊(塊級元素)換行。
float浮動屬性最開始的用法是實現讓目標內容被文字包裹這種在報紙上經常見到的情況，而後來大多被用來實現內容的橫向並排排列，
浮動層：給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼著父元素(默認為body文本區域)的左右邊框。
float的屬性介紹：
left ：元素向左浮動。
right ：元素向右浮動。
浮動的特性：
【1】子級浮動導致父級高度塌陷，解決辦法：1.給父級再次添加一個高度2.使用overflow：hidden
【2】浮動的包裹性：
塊級元素：包裹到內容區域，不再占滿一整行，但是還有長度，長度和內容的長度一致，並且本體依舊是塊級元素；
行內元素：設置浮動後會改變display屬性，使其變成塊級元素，並且可以設置寬高。
【3】元素浮動不會穿過padding區域
【4】浮動會使元素脫離文檔流影響別的元素。
淺談CSS浮動屬性