float

float 屬性有三種包括 left、 right、none

left會浮在左邊
right會浮在右邊(右往左排)

順序則看 HTML 中出現的優先順序
排不下的會換到下面去排

螢幕快照 2013-10-12 下午8.19.29

如果元素的長度不一,會從還排得下的 Y軸較高位置開始排

螢幕快照 2013-10-12 下午8.20.47
但需要注意有兩個狀況需要  Clearing Floats :

  1. Floated 元素比 Non-Floated 的元素高
  2. 全部的子元素都是 Floated 元素

以下是最常用的 Clear方式,只要把父元素加上,子元素就會 Self-Cleared

// The clearfix

.group:before,
.group:after {
   content: "";
   display: table;
}
.group:after {
   clear:both;
}
.group {
   zoom: 1;
}

 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s