CSS標籤入門基礎知識

浮動（float）

傳統網頁佈局的三種方式

網頁佈局的本質——用css來擺放盒子。把盒子擺放在相應的位置。

CSS提供了三種傳統佈局方式：
1、普通流（標準流）
2、浮動
3、定位

標準流（普通流/文檔流）

所謂的標準流：就是標籤按照規定好默認方式排列
1、塊級元素會獨佔一行，從上向下順序排列
2、行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行
3、常用元素

這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了

注意：實際開發中，一個頁面基本包含了着三種佈局方式

爲什麼需要浮動

有很多的佈局效果，標準流沒有辦法完成，此時可以利用浮動完成佈局。因爲浮動可以改變元素標籤默認的排列方式

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示

網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動

什麼是浮動

float 屬性用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

浮動特性（重點）

1、浮動元素會脫離標準流（脫標）
2、浮動的元素會一行內顯示並且元素頂部對齊
3、浮動元素會具有行內塊元素的特性

設置浮動（float）元素最重要特性：

1、脫離標準普通流的控制（浮）移動到指定位置（動），俗稱（脫標）

2、浮動的盒子不再保留原先的位置

3、如果多個盒子都設置了浮動，它們會按照屬性值一行內顯示並且頂端對齊排列
注意：浮動的元素是相互貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動盒子，多出來的盒子會另起一行對齊

4、浮動元素會具有行內塊元素特性
任何元素都可以浮動，不管原先是什麼模式的元素，添加浮動之後具有行內塊元素相似的特性

• 如果塊級盒子沒有設置寬度，默認寬度和父級一樣，添加浮動之後，大小根據內容來決定
• 浮動的盒子中間是沒有縫隙的，是緊挨着一塊的
• 行內元素同理

例子：

5、浮動元素經常和標準流父級搭配使用
爲了約束浮動元素位置，我們網頁佈局一般採用的策略是：
先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置，符合網頁佈局第一準則。

（ps：引自pink老師~，剛剛開始作爲自己的學習筆記寫，如有不好請見諒，阿里嘎多）

參考學習鏈接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1