Css 在并排放置的两个div元素下方放置其他元素

我试过的代码是 CSS代码

#tools
{
    float:left;
}
#sketch 
{
    border: 10px solid grey;
    float:left;
    width: 700px;
    height: 500px;
    position: relative;
}

HTML代码：

<div id="tools">
    <p>These are my tools</p>
</div>
<div id="sketch">
    <p>This is my sketch</p>
</div>
<button type="button">Click</button>

这些是我的工具

这是我的素描

点击

我把两个div并排放置 按钮显示在div的一侧 但是我想要在div下面的按钮

清除浮动：

button { clear: both; }

---

使用clearfix添加包装器：

<div class="wrapper cf">
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
</div>
<button type="button" >Click</button>

这些是我的工具

这是我的素描

点击

尝试使用“清除：左”按钮取消上一个div元素的“浮动：左”

---

有关更多详细信息，请参阅。

您可以使用以下两种方法之一：

1） 按钮{ 明确：两者皆有； }

2） 向Div添加一个类clearfix-“sketch”，该类在DOM之后添加一个伪元素以清除添加的浮点

  <div id="sketch" class="clearfix">
          <p>This is my sketch</p>
   </div>
  .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
   }

这是我的素描

.clearfix:之后{
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}