邊框重疊浮動div

Question

我正在爲我的佈局設計Twitter Feed Javascript。問題是，當我浮動日期和交互鏈接時，應該包圍特定推文的所有部分的邊框忽略日期和交互div，導致邊框與它們重疊。

有什麼辦法可以解決這個問題。這個問題可以在這裏看到（在頁面的底部）：http://www.noellesnotes.com

培訓相關代碼：

HTML

<div id="tweets"> 
    <ul> 
     <li> 
      <p class="tweet">The tweet.</p> 
      <p class="timePosted">TIME</p> 
      <p class="interact">INTERACT LINKS</p> 
     </li> 
    </ul> 
</div> 

CSS

.tweet, .tweet a, .tweet span, .interact a{ 
    margin-bottom: 10px; 
    font-size: 12px; 
    font-family: 'Open Sans', sans-serif, Georgia, sans-serif; 
    word-wrap:break-word; 
} 

.timePosted{ 
    width:40%; 
    font-size: 12px; 
    float: left; 
    font-weight: bold; 
    text-align: left; 
} 

.interact{ 
    width:60%; 
    font-size: 12px; 
    float: left; 
    text-align: right; 
    overflow: hidden; 
} 

.interact a{ 
    margin-right: 3px; 
    text-decoration: underline; 
    font-family: 'Arvo', Georgia; 
} 

#tweets ul{ 
    margin-left: 0; 
    padding-left: 0; 
    list-style: none; 
} 

#tweets ul li{ 
    border: 3px solid rgba(255,255,255,0.4); 
    margin: 3px 0; 
    padding: 3px; 
} 

Answer 1

這是一個clearfix的情況下DIV。

HTML：

<div id="tweets"> 
    <ul> 
     <li class="clearfix"> <!-- clearfix class added here --> 
      <p class="tweet">The tweet.</p> 
      <p class="timePosted">TIME</p> 
      <p class="interact">INTERACT LINKS</p> 
     </li> 
    </ul> 
</div> 

CSS：

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { /* for IE/Mac */ 
    display: inline-block; 
} 

還有一些其他的解決方案clearfix我建議搜索找到並使用最適合您的需求之一。