Css 将div定位在两个浮动div后面

我有两个div，一个带float:left，另一个带float:right。它们并排显示，但当我添加第三个div时，它会显示在两个浮动div上，而不是像我尝试的那样显示在后面

<div id="left_side"  style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>

我想做的是：

我实际得到的是：

---

我尝试将垂直对齐：底部添加到最后一个div，但没有结果。我还尝试添加一个包含两个float div的div，然后是第三个div，但我总是得到相同的结果。我确信这一定是一个非常基本的问题，但我在任何地方都找不到答案…

添加

clear:two

到你的

下方
div

查看此项。
添加
清除：两个
都添加到您的
下方的
分区

请看此图。
下面的\u侧需要一个浮动和一个清除：两者都需要

当前，左和右是浮动的-这将使它们脱离文档流。也就是说，下边的位置是错误的

如果您将float:left放在下方，它也会将其从文档流中取出，并将其放在与左侧和右侧（相对）相同的空间中，然后添加clear:both，使其显示在左侧和右侧下方
下方。\u side需要一个float和一个clear:both

<div id="left_side"  style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>

当前，左和右是浮动的-这将使它们脱离文档流。也就是说，下边的位置是错误的

如果将float:left放在下方，它也会将其从文档流中取出，并将其放在与左侧和右侧（相对）相同的空间中，然后添加clear:tware，使其显示在左侧和右侧下方
gdfgfdg
<div id="left_side"  style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>

GFDGFKJKJH
DSFDS
gdfgfdg
GFDGFKJKJH
DSFDS