浮動屬性float用於創建浮動

使其移動到另一邊 直到左或右邊緣觸及包含塊或另一個浮動框的邊緣

語法 :

    選擇器{float:屬性值;}
    /* 
    none 不浮動
    left 向左浮動
    right 向右浮動
    */

浮動的特性

加了浮動之後的元素會具有其他的特性

a. 浮動元素會脫離標準布局方式

脫離標準布局方式的控制移動到指定位置

且浮動個盒子不再保留原先的位置

b. 浮動的元素會一行內顯示且元素頂部對齊

如果給盒子都設置了浮動則盒子會按照屬性值，變為一行內顯示並且頂端對齊排列

注意 :

• 浮動的元素是互相貼靠再一起的(不會有縫隙)
• 如果父級寬度裝不下盒子多出的盒子將會另起一行對齊

c. 浮動的元素會具有行內塊元素的特性

任何元素都可以浮動，不管原本是什麼模式的元素

添加浮動後皆會具有行內塊元素相似的特性

• 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬

但是設置成浮動元素後 大小則會根據內容來定(行內塊元素)

• 浮動的盒子中間沒有縫隙，是緊貼在一起的
• 行內元素同理

浮動的備註

浮動元素經常和標準布局方式搭配使用

為了約束浮動元素位置，網頁布局一般採取的方式是 :

先用標準布局的父元素排列上下位置，之後內部子元素採取浮動排列左右位置

浮動 - - - codepen