CSS屬性float詳解

CSS屬性float詳解

在html頁面佈局中，塊元素無論寬度有沒有佔滿整個瀏覽器，都是默認豎直向下依次排列的。這時候需要塊元素水平排列怎麼辦呢？這就需要用float解決問題了。
浮動前：

				float: left;/* 元素左浮動，從左到右依次排列 */
				float: right;/* 元素右浮動，從右向左依次排列 */
				float: none; /* 默認值，不浮動 */
				float: inherit;/* 規定從父元素繼承浮動屬性 */

左浮動後：


右浮動後：


可以看到右浮動略有不同，會從右往左按順序排列。

無論是塊元素，行內元素，還是行內塊元素，都可以使用浮動實現水平排列。排滿一行自動換下一行繼續排列。

注意點：

1.浮動會使元素脫離文檔，不佔頁面空間，導致下面的元素擠上去，文字會環繞顯示；

2.如果父元素不設寬高，會造成父元素高度塌陷；

可以很明顯的看出，父元素癟了，這就是高度塌陷。

3.如果不設置寬度，浮動後寬度會收縮；

默認情況下不設置寬度塊元素寬度是鋪滿整個瀏覽器窗口的，但是浮動後寬度會收縮


沒有設置寬度的被內容撐開，沒有內容的寬度也沒有了。

4.浮動之後margin 0 auto;失效

脫離文檔後margin 0 auto ；失效。