为什么我的div重叠？

Question

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

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

一些帮助将不胜感激。提前致谢。我对Frontend相当新。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>