[Back To Basic] CSS float and clear

float

用於定位、格式化內容

• left: 在同一個容器中，漂浮在容器左側
• right: 在同一個容器中，漂浮在容器右側
• none(預設值): 不浮動(顯示在原本出現的位置)

clear

• none: 允許浮動在左右兩側
• left: 不允許浮動在左側
• right: 不允許浮動在右側
• right: 不允許浮動在左右側

clearfix 密技

若浮動的元素超出容器，浮動的元素會溢出容器。

解法: 給定容器: overflow: auto

.clearfix {

    overflow: auto;

}

更安全的作法:

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}

source code