Question

我的工作布局有两个div s（橙色和蓝色）浮动左右两侧固定大小的中间div（绿色），它应该扩展到底部。

现在，我想添加一个显示在上面div最高位置下方的页脚（红色），但我只是在中间div下方显示它，如下所示

我尝试了overflow: auto，但没有效果。

<div style="float: left;width: 100px;border-style: solid;border-color: orange;">
left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating 
</div>
<div style="float: right;border-style: solid;border-color: blue;">
right floating right floating right<br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating 
</div>
<div style="layout:block;border-style: solid;border-color: green;">
middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
</div>
<div style="display:block;border-style: solid;border-color: red;">
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer 
</div>

Answer 1

将clear: both添加到红色div。

<div style="float: left;width: 100px;border-style: solid;border-color: orange;">
left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating left floating 
</div>
<div style="float: right;border-style: solid;border-color: blue;">
right floating right floating right<br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating right floating right <br/>
floating 
</div>
<div style="layout:block;border-style: solid;border-color: green;">
middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle 
</div>
<div style="display:block;border-style: solid;border-color: red;clear: both">
footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer 
</div>

https://jsfiddle.net/6c4713ym/

如何在一组具有浮动div的div下面放置一个CSS框？

1 个答案: