用力推浮 <div> 在另一个下面 <div>

Question

造访我的样本： http : //codepen.io/anon/pen/qKBfE

这也是CSS代码：

.bubble
{
text-align:left;
color:white;
float:left;
position: relative;
padding: 10px;
background: #95a5a6;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-left: 5px solid #e67e22;
margin-bottom:2%;
margin-top:2%;
margin-right:300px;
}

那里有很多无用的代码，但是请只引用div

class="bubble" | class="bubble2"

如您所见，这是一个带有自定义聊天气泡的聊天框，我的“气泡”类是主机，而“气泡2”类是客户端。

当在多个消息中键入“冒泡”时，它们不会堆叠，而是内联显示，有时仅堆叠。

我如何确保每个气泡将另一个气泡推下并向主机浮动，向客户端浮动。

Answer 1

添加

clear:both;

作为.bubble和.bubble2的第一行为我解决了吗？ 这就是你想要的吗？

.bubble2
{
  clear: both;
}

.bubble
{
  clear: both;
}