為什么我的div彼此重疊？

Question

這些div應該彼此相鄰，但最終會重疊。 我已經嘗試刪除float並調試代碼中的每個屬性。

我不確定我在做什么錯。 頁面的其余部分具有類似的結構，但僅在此處發生。

一些幫助，將不勝感激。 提前致謝。 我對Frontend很陌生。

 .features-list{ width: 100%; background-color: #ffffff; } .feature-card{ padding-left: 50px; padding-right: 50px; background: #ffffff; border-radius: 4px; margin-bottom: 10px; box-shadow: 0 0 3px 1px #e0e0e0 } .feature-container{ width: 33%; float: left; } .eyecatcher{ color: #95C123; height: 40px; font-weight: bold; font-size: 20px; } .video-explanation{ background: #7d7d7d; padding: 45px 0; } 

 <div class="features-list"> <div class="feature-card"> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> </div> </div> <div class="video-explanation"> Video Explanation </div> 

Answer 1

正如我在上面的評論中所寫，您必須清除浮點數或添加overflow: hidden到.feature-card

clear: both ：

 .features-list{ width: 100%; background-color: #ffffff; } .feature-card{ padding-left: 50px; padding-right: 50px; background: #ffffff; border-radius: 4px; margin-bottom: 10px; box-shadow: 0 0 3px 1px #e0e0e0 } .feature-container{ width: 33%; float: left; } .eyecatcher{ color: #95C123; height: 40px; font-weight: bold; font-size: 20px; } .video-explanation{ background: #7d7d7d; padding: 45px 0; } .feature-card:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

 <div class="features-list"> <div class="feature-card"> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> </div> </div> <div class="video-explanation"> Video Explanation </div> 

或與overflow: hidden ：

 .features-list{ width: 100%; background-color: #ffffff; } .feature-card{ padding-left: 50px; padding-right: 50px; background: #ffffff; border-radius: 4px; margin-bottom: 10px; box-shadow: 0 0 3px 1px #e0e0e0; overflow: hidden; } .feature-container{ width: 33%; float: left; } .eyecatcher{ color: #95C123; height: 40px; font-weight: bold; font-size: 20px; } .video-explanation{ background: #7d7d7d; padding: 45px 0; } 

 <div class="features-list"> <div class="feature-card"> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> <div class="feature-container"> <div class="eyecatcher"> asdasdasd2 </div> <div> asdasdasd </div> </div> </div> </div> <div class="video-explanation"> Video Explanation </div>