html - HTMLフローティング要素がdiv内のスペースを占めるようにする

Question

<div>別の中にフローティングが<div>あり、それを含む div には黒い境界線があります...

問題は、フローティング<div>が実際には高さ (約 600px) ほどを占めていないため<div>、境界線を含むコンテンツは高さ 20 px のようになり、境界線が内側の div をまっすぐ通過することです。

内側の div をフロートさせながら、想定されているスペースを占有させるにはどうすればよいですか?

ここに私の情報源があります：

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

Answer 1

マイクロクリアフィックス法を使用:

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