如何使用浮動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/