如何使用浮动div来定位一组div下面的CSS框？

Question

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

现在，我想添加一个页脚（红色），显示在以上div s的最高点下方，但我只能看到它显示在中间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 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/