聊天对话框

做一个静态的聊天对话框，用到的主要知识有浮动和清除浮动。

style样式设置：

   .box{
        width: 400px;
        height: 800px;
        overflow: auto;
        border: 1px solid #000000;
      }
   p{
     margin: 10px;
     padding: 8px;
   }
  .friend{
    border: 1px solid #666666;
    border-radius: 6px;
    background-color: #ddd;
    float: left;
    clear: both;
    max-width: 250px;  
  }
  .self{
     background-color: #83C44E;
     border: 1px solid #777;
     float: right;
     clear: both;
   }

body区域：

 <div class="box">
     <p class="friend">在吗</p>
     <p class="self">在的</p>
     <p class="friend">起床了吗</p>
     <p class="self">还没有</p>
     <p class="friend">怎么还不起？？</p>
     <p class="self">你没叫我起床啊！</p>
     <p class="friend">我不叫你就不起了吗？</p>
     <p class="self">那我干啥，起床也没事干</p>
     <p class="friend">没撒打算老师来到喀山阿拉蕾深刻的事但打开金沙萨德拉克鸡蛋拉萨看见达拉斯杰拉德</p>
     <p class="self">哦</p>
 </div>