這篇文章給大家分享的是有關(guān)CSS浮動的詳細(xì)介紹，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲。

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹埂?/strong>

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

CSS 浮動，在 CSS 中，我們通過 float 屬性實(shí)現(xiàn)元素的浮動。                   

請看下圖，當(dāng)把框 1 向右浮動時(shí)，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當(dāng)框 1 向左浮動時(shí)，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個(gè)框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個(gè)框向左浮動直到碰到前一個(gè)浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個(gè)浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時(shí)可能被其它浮動元素“卡住”：

看完上述內(nèi)容，你們對CSS浮動有進(jìn)一步的了解嗎？如果還想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀。