Float & Clear


Float

設定物件能浮動排版。使用類別名稱為 .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>
右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.