Float & Clear


Float

float Breakpoints

設定物件能浮動排版。使用類別名稱為 .u-float{@bp}:。可針對不同斷點範圍切換浮動設定。

.u-float:l
.u-float:r
.u-float:n
<div class="u-float:l"></div> <div class="u-float:r"></div> <div class="u-float:n"></div> <div class="[email protected]:l [email protected]:r"></div>

Clearfix

clear

用於修正使用 Float 後,父層 DOM 失去高度的問題。使用類別為 .clearfix,並設定於 Float 物件的父層上。

沒有使用 Clear
.u-float:l
.u-float:r

使用 Clear
.u-float:l
.u-float:r
<div class="u-clearfix"> <div class="u-float:l"></div> <div class="u-float:r"></div> </div>

Clear

clear

用於修正使用 Float 產生的排版問題。使用類別為 .clear,並設定於 Float 物件之後。

沒有使用 Clearfix
.u-float:l
.u-float:r

使用 Clearfix
.u-float:l
.u-float:r
<div> <div class="u-float:l"></div> <div class="u-float:r"></div> <div class="u-clear"></div> </div>