html - 为什么我的 div 相互重叠？

Question

这些 div 应该在彼此之下，但它们最终会重叠。我已经尝试删除 float 并调试代码中的每个属性。

我不确定我做错了什么。页面的其余部分具有类似的结构，但只发生在此处。

一些帮助将不胜感激。提前致谢。我对前端相当陌生。

.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

正如我在上面的评论中所写，您要么必须清除 float ，要么将 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>

或者使用溢出:隐藏:

.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>