【HTML、CSS教學】6. Float

🚩 Float

在做響應式網頁時，float(浮動)是一個很必要的工具，它可以快速協助前端工程師進行排版。

如以下CodePen範例，當.box有設定float:left時，給予一個寬度30.33%，就會呈現自動排版的效果。以下有兩點要注意的是：

1. margin-right並不算在box-sizing裡面(參考【HTML、CSS教學】3. Box Model)，因此.box的with寬度若是要排三欄式時，計算方式為：
   (100/3) - margin-right的寬度。
2. 在使用float之後，最外圈的div.demo需要引用一個class:after，並在裡面寫clear:both，已清除浮動效果，否則接在demo後面的排版會亂掉。

float除了有left之外，還有以下幾種常用寫法：

1. float: left; → 靠左浮動
2. float: right;→ 靠右浮動
3. float: none;→ 預設值，也就是不浮動