css - ラッパーのdivの高さは0で、内部にフロート要素があります

Question

フローティングである<div>2つの内部を含むラッパーがあります。<div>

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

問題は、 2つの内部がそれぞれ<div>40pxであるため、ラッパーの幅が80pxであるということです。ただし、ラッパーは<div>常に高さが高く、境界線が上部の線のように見えます。<div>0px

そこで、2つ<div>の内側をの中に配置しました<table>。それはうまくいきました。しかし、どうすればこの問題を回避でき<table>ますか？

Answer 1

overflow: hidden親に設定します。

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Answer 2

外側の2つの子が浮いているため、外側divは崩壊しています。divこれに対する最も簡単な修正はoverflow: hidden;、外側に設定することdivです。

Answer 3

これを試して：

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close