Html 设置2个并排div下方的文本

为了设置并排显示的2个div下面的文本（由“float:left”设置），我必须做什么。现在，“underwever”div中的文本显示在第二个div标记的右侧

CSS

#wrapper {
    width: 500px;   
}
#leftcolumn, #rightcolumn {
    float: left;
    height: 200px;
    width: 250px;
}
#leftcolumn {
    background-color: #111;
}
#rightcolumn {
    background-color: #777;
}

HTML

<div id="wrapper">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>  
</div>
<div id="underneath">
    This should be underneath
</div>

这应该在下面

下面是一个JSFIDLE：

下面是一个JSFIDLE：

---

只需添加一个div即可清除浮点值

     .clear{
        clear:both;
      }

---

只需添加一个div即可清除浮点值

     .clear{
        clear:both;
      }

在这里，由于您使用了

float:left

，因此

#下方的
div占据了左侧的空间，
您可以使用
clear:left
或
clear:both
使其显示在其他容器的下方，即使在使用
clear:both
时左/右有空间


从

clear
属性指定元素的哪些边与其他边相同
不允许使用浮动元素

在这里，由于您使用了
float:left
，因此
#下方的
div占据了左侧的空间，
您可以使用
clear:left
或
clear:both
使其显示在其他容器的下方，即使在使用
clear:both
时左/右有空间


从

clear
属性指定元素的哪些边与其他边相同
不允许使用浮动元素


这应该在下面

您尚未清除浮动

<div style="clear:both"></div>



这应该在下面

您尚未清除浮动

<div style="clear:both"></div>


最好在答案中添加代码，因为外部链接可能并不总是存在，最终可能会消失。@Metalskin:他确实添加了代码，我不明白你的意思for@SajadLfc我的错误，我最初认为JSFIDLE需要理解答案，因为我误读了问题/答案。最好在答案中添加代码，因为外部链接可能并不总是存在，最终可能会消失。@Metalskin:他确实添加了代码，我不明白你在问什么for@SajadLfc我的错误，我最初认为JSFIDLE需要理解答案，因为我误读了问题/答案。
<div id="wrapper">
   <div id="leftcolumn"></div>
   <div id="rightcolumn"></div>  
</div>
<div style="clear:both"></div>
   <div id="underneath">
     This should be underneath
</div>

<div style="clear:both"></div>