Wie positioniere ich eine CSS-Box unter einer Gruppe von Divs mit Floating Divs?

Question

Ich habe funktionierendes Layout mit zwei div s (orange und blau) links und rechts von fester Größe einer mittleren div (grün) schweben, die nach unten erweitern soll.

Jetzt möchte ich eine Fußzeile (rot) hinzufügen, die unterhalb der höchsten der oben genannten div s angezeigt wird, aber ich sehe es nur unter der Mitte div wie unten angezeigt.

Ich versuchte overflow: auto, aber es hat keine Wirkung.

<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 zum roten div hinzufügen.

<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/