html - 即使前一天的高度设置为自动，Div 仍与下方重叠

Question

我有一个类为“work”的 div，它与下面另一个名为“about”的 div 重叠，尽管它们的高度都设置为 auto。请记住，我正在使用媒体查询为 480 像素的屏幕大小编写代码。查看图片以了解我在说什么。 The button is overlaping onto the div below

.work {
  max-height: auto;
  background-color: #f2f2f2;
  font-family: Myriad Pro;
  text-align: center;
}

.work .container {
  width: 100%;
  height: 90%;
  padding: 5% 5%;
}

.work img {
  width: 100%;
  height: 100%;
  border: 2px solid GhostWhite;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.work button {
  margin-top: 10px;
  float: left;
  background-color: #0080ff;
  border-radius: 4px;
  border: 2px solid GhostWhite;
  margin-bottom: 30px;
  padding: 10px 20px;
  text-align: center;
}

.work button a {
  color: #ffffff;
  font-weight: lighter;
  text-decoration: none;
}


/* About me */

.about {
  background-color: #000000;
  #ffffff;
  max-height: auto;
  max-width: 100%;
  font-family: Myriad Pro;
  text-align: center;
}

.about .container {
  max-width: 100%;
  max-height: 100%;
  padding: 10%;
  font-size: 1.2rem;
}

<div class="work">
  <div class="container">
    <h3>MY WORK</h3>
    <hr>
    <div class="gallery">
      <img id="image-1" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>


    <div class="gallery">
      <img id="image-2" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>
  </div>
</div>

<!-- About Me -->

<div class="about">
  <div class="container">
    <h3>ABOUT ME</h3>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia urna vel dapibus. Suspendisse nec porttitor ipsum. Etiam lorem dolor, pulvinar eu magna ac, lobortis scelerisque nulla. Aenean vel fringilla neque, at porta risus. Praesent
      vitae congue dolor. Morbi pharetra egestas lacinia. Nam luctus dictum aliquam. Vivamus vestibulum egestas odio, ut lacinia justo. Nullam vulputate blandit efficitur.</p>
  </div>
</div>

Answer 1

已添加

.about {
  clear: both;
}

and

.work {
  float:left;
  width:100%;
}

由于按钮向左浮动，因此应该为 .about 清除它。

.work {
  max-height: auto;
  background-color: #f2f2f2;
  font-family: Myriad Pro;
  text-align: center;
  float: left;
  width: 100%;
}

.work .container {
  width: 100%;
  height: 90%;
  padding: 5% 5%;
}

.work img {
  width: 100%;
  height: 100%;
  border: 2px solid GhostWhite;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.work button {
  margin-top: 10px;
  float: left;
  background-color: #0080ff;
  border-radius: 4px;
  border: 2px solid GhostWhite;
  margin-bottom: 30px;
  padding: 10px 20px;
  text-align: center;
}

.work button a {
  color: #ffffff;
  font-weight: lighter;
  text-decoration: none;
}


/* About me */

.about {
  background-color: #000000;
  #ffffff;
  max-height: auto;
  max-width: 100%;
  font-family: Myriad Pro;
  text-align: center;
  clear: both;
}

.about .container {
  max-width: 100%;
  max-height: 100%;
  padding: 10%;
  font-size: 1.2rem;
}

<div class="work">
  <div class="container">
    <h3>MY WORK</h3>
    <hr>
    <div class="gallery">
      <img id="image-1" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>


    <div class="gallery">
      <img id="image-2" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>
  </div>
</div>

<!-- About Me -->

<div class="about">
  <div class="container">
    <h3>ABOUT ME</h3>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia urna vel dapibus. Suspendisse nec porttitor ipsum. Etiam lorem dolor, pulvinar eu magna ac, lobortis scelerisque nulla. Aenean vel fringilla neque, at porta risus. Praesent
      vitae congue dolor. Morbi pharetra egestas lacinia. Nam luctus dictum aliquam. Vivamus vestibulum egestas odio, ut lacinia justo. Nullam vulputate blandit efficitur.</p>
  </div>
</div>