清除這兩個選項后，margin-top無效

Question

您好，我正在創建一個如下所示的聊天UI：

img http://gyazo.com/96a27ffed5203d3b435fe41d8832e1ca.png

如您所見，每個消息都是li元素，現在頭像和消息div都向左浮動 。 現在，如果我不添加clear: both; 在li元素上，這些元素將在一行中一個接一個地運行。 因此，在清除所有內容之后，當我執行margin-top ，要在消息元素之間創建一些填充，除非添加500px的空白或其他內容，否則它不會執行任何操作。

<section id="chat-area">
  <section id="users-in-chat">
    <ul>
      <li><img src="images/avatar-big.png"/></li>
    </ul>
  </section>
  <section id="chat-messages">
    <ul>
      <li><img src="images/avatar-big.png" class="message-avatar"/>
        <div class="message"><span>So yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you laterSo yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you later</span></div>
      </li>
      <li><img src="images/avatar-big.png" class="message-avatar"/>
        <div class="message"><span>So yeah I am good how are yoly in this shit and i shou later</span></div>
      </li>
    </ul>
  </section>
</section>

和CSS：

#chat-messages ul {
    list-style: none;
    padding: 20px;
}

#chat-messages ul li {
    clear: both;
    margin-top: 15px;
}

#chat-messages ul li:first-child {
    margin-top: 0;
}

.message-avatar {
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;

    float: left;
}

.message {

    margin-left: 15px;

    padding: 15px;
    max-width: 70%;
    background-color: rgba(144, 195, 245, 0.3);
    -webkit-border-radius: 0 20px 20px 20px;
    border-radius: 0 20px 20px 20px;

    float: left;
}

我在那里做錯了什么？

Answer 1

嘗試這個：

 #chat-messages ul li { clear: both; margin-top: 15px; float: left; } 

Answer 2

#chat-messages ul li {
clear: both;
margin-top: 15px;
overflow:hidden;
}