如何将CSS盒放置在一组Divs的下方，并带有浮动Divs

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。

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