使html浮动元素占用div内的空间

我在另一个

中有一个浮动的

，包含的div有一个黑色边框

问题是，浮动的

实际上并没有占据它的高度（大约600px），因此包含边框的

最终高达20px，边框笔直穿过内部分区

如何使内部div在保持浮动的同时占据它应该占据的空间

以下是我的资料来源：

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

使用以下方法：

请查看外部div与内部div之间的大小。

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

.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;
}