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

【问题标题】：make html floating elements take up space inside div使html浮动元素占用div内的空间
【发布时间】：2013-04-08 08:30:55
【问题描述】：

我在另一个<div> 中有一个浮动的<div>，包含的 div 有一个黑色边框...

问题是浮动的<div>实际上并没有占用它的高度（大约600px）左右，所以包含<div>的边界最终像20 px高，边界直接穿过内部 div。

如何让内部 div 占据它应该占用的空间，同时让它保持浮动？

这是我的来源：

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

【问题讨论】：

看看micro-clearfix
外层 div 自身不调整大小到内部 div。

标签： html margin

【解决方案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;
}

【讨论】：