Question

在div+css中，如何闭合浮动元素？

按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？

Answer 1

<div>
<div style="float:left">abc1</div>
<div style="float:left">abc2</div>
<div style="clear:both;"></div>
</div>

以上代码你应该能懂吧，层里面不管有多少个浮动元素，在最后加个具备clear:both属性的层就可以了。

你可以类似把 .clear {clear:both} 这个代码放进CSS文件里，以后就直接用<div class="clear"></div>

Answer 2

<div>
<div style="float:left">abc1</div>
<div style="float:left">abc2</div>
<div style="clear:both;"></div>
</div>

以上代码你应该能懂吧，层里面不管有多少个浮动元素，在最后加个具备clear:both属性的层就可以了。

可以类似把 .clear {clear:both} 这个代码放进CSS文件里，以后就直接用<div class="clear"></div>

Answer 3

这样子：
css:
.clear{height:1px;overflow:hidden;clear:both}

html:
<div>
<div style='float:left'>内容内容</div>
<div style='float:right'>内容内容</div>
<div class="clear"></div>
</div>
这样就能自动调整高度了。

Answer 4

第一种：给父级标签加样式：overflow：hidden；
第二种：在子标签后在加一同类空标签，对其设置样式：clear:both；
推荐使用第一种