CSS 小技巧之一：float 與 BFC，側欄固定寬度

通常在左右兩欄並排，.child1 30% ，.child2 70%。
我們會在兩個區塊下 float: left ，如下圖所示：

 .parent {

 }

 .child1 {
  float: left;
  width: 30%;
 }

 .child2 {
  float: left;
  width: 70%;
 }

這樣的樣式設定在 RWD 時，.child1 的部分會窄到幾乎無法觀看。
有時候我們會希望側欄固定 200px，RWD 只縮放 .child2 部分，如下圖所示：



這時候我們可以對 .child1 下 float: left，.child2 下 overflow: hidden 如下：

 .parent {

 }

 .child1 {
  float: left;
  width: 200px;
 }

 .child2 {
  overflow: hidden;
 }

這是利用 overflow: hidden 所觸發的 BFC 特性。
簡單來說，具有 BFC 特性的節點會避開具有 float 特性的節點，
但前提是 float 節點必須位於 BFC 節點之前，所以當我們需要三欄伸縮時：



我們的 HTML 結構必須是：

 <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
 </div>

 .parent {

 }

 .child1 {
  float: left;
  width: 100px;
 }

 .child2 {
  float: right;
  width: 100px;
 }

 .child3 {
  overflow: hidden;
 }

註：因為子節點具有 float 特性，因此還是必須要清除浮動。