今天我們來了解一下浮動

我們之前說過div是一個塊級元素單獨佔一行的,排版會很不方便,這就引出了我們今天要學習的內容:浮動

這是沒加浮動的頁面效果：

CSS浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

單獨看上面的解釋理解起來有點難度~,那麼現在我們就來使用一下浮動

右浮動:

單獨一個div塊向右浮動

左浮動:

這樣所有的元素就都在一行了

但是要注意一些情況:

當包含的框的寬度不夠的時候會把最後一個div塊擠到下一行,直到有足夠的空間放下它

浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：

還有就是：當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。就像下面這樣~

這個時候就需要使用clear來清除浮動了

clear 屬性定義了元素的哪邊上不允許出現浮動元素，上面的情況直接加在div1上面是沒有效果的~

我們可以建立一個空的元素來清除浮動~

css的盒子模型

其實這些HTML頁面上的元素其實就像一個個小盒子一樣~

打個比方：

我們收快遞的時候,開啟快遞盒子,盒子最中間的就是我們買的物品,也就是內容,然後盒子就是邊框(border)自身也有一定的厚度,盒子到物品之間的距離就是內邊距(padding),那麼如果我們一次取了很多快遞,快遞盒子之間也會有一定的距離,這就是外邊距(margin)

其中內邊距、邊框和外邊距的數值都是可選的，預設值是零

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加整個元素框的尺寸。

至於如何設定這些屬性的值。

就不詳細的說了~

夥伴們可以自己來實驗一下

我是萌新娜娜

立志做一個不翻車的老司機

學習Java的路上請多多指教

擴充套件閱讀

微信公眾號：javafirst

掃碼關注免費獲取更多資源