2013年6月26日 星期三

compass: 使用compass清除浮動

我們經常利用浮動元素來達成頁面的排版,例如將<li>進行浮動來制作水平的菜單,或是浮動<div>來完成兩欄位的排版…等等,下圖為使用浮動來產生兩欄排版的例子:

不過一旦將元素進行浮動後,將導致浮動的元素脫離原本的資訊流,這使得包覆這些浮動元素的外層元素,無法偵測到這些被浮動元素的實際大小,進而影響外層元素的樣式設定,如背景、框線...等等。以下面例子舉例:

html-code:

<div class="content">
  <div class="sidebar">我是sidebar</div>
  <div class="main">我是main</div>
</div>

css-code:

.content {
  background-color: #ccc;
  padding: 1.5em;
}
.sidebar {
  float: left;
  width: 30%;
  background-color: #3498DB;
  height: 150px;
}
.main {
  float: left;
  width: 70%;
  background-color: #2ECC71;
  height: 150px;
}

實際呈現的情形如下圖:

這個問題很多的解決方式,而我採用的解決方式來自於A new micro clearfix hack這邊文章中,程式碼如下:

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
}
.content:after {
  content: "";
  display: table;
  clear: both;
}

結果如下圖:

而每次要解決這個問題都要打這麼多行的程式碼,實在非常浪費時間。在compass的幫助下,你只需要打一行程式碼,此段程式碼如下:

.content {
  @include pie-clearfix;
}

此段程式碼經過compass編譯後,就會自動產生上述繁瑣的程式碼,使我們節省這些寶貴的時間。

注意事項: 這個解決方法不適用於firefox 3.5之前的版本,如果需要支援firefox 3.5之前的版本,請使用compass提供的另外一個mixin,程式碼如下:

.content {
  @include legacy-pie-clearfix;
}

這段程式碼經過compass編譯後會產生以下的css程式碼:

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
 }
.content:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

參考資料:

沒有留言:

張貼留言