float是什麼？浮動在CSS中的作用

文章簡介：

float深入剖析。

float即為浮動，在css中的作用是使元素脫離正常的文件流並使其移動到其父元素的「最左邊」或「最右邊」。下面解釋下這個定義中的幾個名詞的概念：

對其父元素的影響

對於其父元素來說，元素浮動之後，它脫離當前正常的文件流，所以它也無法撐開其父元素，造成父元素的塌陷，效果如下圖所示。

對其兄弟元素（非浮動）的影響

對其兄弟元素（浮動）的影響

float對自身元素的影響

float物件將被視作塊物件(block-level)，即display屬性等於block。

float對子元素的影響

我們知道當乙個元素浮動時，在沒有清楚浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，並且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。

float對父元素之外的元素的影響

實際上關於float在頁面中帶來的影響還有許多，只是它們存在於各種特定的場景，無法一一枚舉，本文也並非想要窮舉所有的情況，只是希望同學們能通過本文而來了解float是什麼，以及它對文件所造成的破壞。只有深刻理解了它的含義才能以在各種不同的場景隨機應變地使用float這個神奇的東西。