强制将浮动的<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;
}

那里有很多无用的代码,但请参考divs

class="bubble" | class="bubble2"

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

当多个消息中出现"冒泡"类型时,它们不会堆叠,而是以内联方式显示,有时仅堆叠.

我怎样才能确保每个气泡向下推动另一个气泡并向左浮动为主机并为客户端浮动.

Answer 1

添加

clear:both;

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

.bubble2
{
  clear: both;
}

.bubble
{
  clear: both;
}