强制将浮动的<div>推到另一个浮动的<div> </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;
}

Theres中有很多无用的代码，但请用

引用div

class="bubble" | class="bubble2"

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

当多个消息中出现“冒泡”类型时，它们不会堆叠，而是以内联方式显示，有时只会堆叠。

我如何确保每个气泡向下推动另一个气泡并向左浮动以供主机使用并向客户端浮动。

Answer 1

添加

clear:both;

因为.bubble和.bubble2的第一行修复了它吗？ 这是你想要的吗？

.bubble2
{
  clear: both;
}

.bubble
{
  clear: both;
}