使html浮動元素占用div內的空間

Question

我在另一個<div>有一個浮動<div> ，包含div有一個黑色邊框...

問題是浮動的<div>實際上並沒有占據它的高度（大約600px）左右，因此帶邊框的包含<div>最終高達20像素高，邊框直接通過內部div 。

我如何讓內部div占據它應該占據的空間，同時仍然讓它浮動？

這是我的來源：

<div style="border:1px solid black">
    <div style="float:left;height:200px;"></div>
</div>

Answer 1

使用micro-clearfix方法：

<div style="border:1px solid black" class="cf"> 
  <div style="float:left;height:200px;"> 
  </div> 
</div>

CSS

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
  *zoom: 1;
}