CSS Wrapper div无效

Question

http://jsfiddle.net/xVNN9/1/

在这个小提琴中，我厌倦了在所有其他div周围包裹一个div并给它一个背景颜色。可悲的是，这并不像预期的那样工作，它就像包裹div一样不存在。这个小提琴怎么了？所有div应该放在一个灰色框中，换行div的背景颜色。

<div class="wrap">

<div class="line">a</div>
<div class="line">b</div>
<div class="line">c</div>
<div class="line">d</div>

<div class="first">e</div>
<div class="line">f</div>
<div class="line">g</div>

</div>

CSS

div.wrap {background-color:#CFCFCF;}

div.line {float:left;background-color:#00FF00; margin:5px; }
div.first {clear:both; float:left; margin:5px;}

Answer 1

您只需清除浮动元素即可。为此，只需将overflow: hidden添加到.wrap

即可

Answer 2

您可以将display: inline-block添加到.wrap

Answer 3

清除元素并因此说父div应该在其中包含所有内容的最简洁方法是在末尾添加清除div。

默认情况下，在其中添加浮动元素时，不会更新包装器维度。但是当你清除它们时，尺寸会更新以达到最后一个清除/浮动元素的末尾。

<div style="clear: both"></div>

请在此处查看演示：http://jsfiddle.net/xVNN9/5/