フローティングディビジョンを持つdivのグループの下にCSSボックスを配置するにはどうすればよいですか？

Question

私は、div（橙色と青色）の2つの固定レイアウトの左右を浮かべて、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

赤のdivに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/