当未设置高度时，为什么将div高度固定为特定值？

Question

.section-steps {
  background-color: #ede3e3;
}

.steps-box:first-child {
  text-align: right;
  padding-right: 3%;
  margin-top: 30px;
}

.steps-box:last-child {
  padding-left: 3%;
  margin-top: 75px;
}

.app-screen {
  width: 40%;
}

.works-step {
  margin-bottom: 50px;
}

.works-step:last-of-type {
  margin-bottom: 80px;
}

.works-step div {
  color: #e67e22;
  border: 2px solid #e67e22;
  display: inline-block;
  border-radius: 50%;
  height: 55px;
  width: 55px;
  text-align: center;
  padding: 5px;
  float: left;
  font-size: 150%;
  margin-right: 25px;
}

.button-app img {
  height: 50px;
  width: auto;
  margin-right: 10px;
}

<section class="section-steps">
  <div class="row">
    <h2>How it works &mdash; simple as 1, 2, 3</h2>
  </div>
  <div class="row">
    <div class="col span_1_of_2 steps-box">
      <img src="Resource/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
    </div>
    <div class="col span_1_of_2 steps-box">
      <div class="works-step">
        <div>1</div>
        <p>Choose the subscription plan that best fits your needs and sign up today.</p>
      </div>
      <div class="works-step">
        <div>2</div>
        <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
      </div>
      <div class="works-step">
        <div>3</div>
        <p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
      </div>
      <a href="#" class="button-app"><img src="Resource/img/download-app.svg" alt="App Store Button"></a>
      <a href="#" class="button-app"><img src="Resource/img/download-app-android.png" alt="Play Store Button"></a>
    </div>
  </div>
</section>

渲染的输出如下图：

<section class="section-steps">的高度应等于<section class="section-steps">的所有子元素，但是如您在图像中看到的那样，红色边框表示<section class="section-steps">的高度。但其高度应为绿色边框。我的代码有什么问题？我尝试了几种清晰的方法：既浮动之后，也没有运气。有想法吗？

Answer 1

当您浮动某物时，它会将其弹出到包含的元素之外，因此.section-steps的高度不能由其子元素确定。

全屏查看代码片段以查看效果。 （为防止较宽的段落低于（2），您需要使用flex-box CSS为其提供灵活的宽度。）

  .section-steps{
        background-color: #ede3e3;
    }
    .steps-box{
       
    }
    .steps-box:first-child{
         text-align: right;
        padding-right: 3%;
         margin-top: 30px;
    }
    .steps-box:last-child{
       padding-left: 3%;
        margin-top: 75px;
    }
    .app-screen{
        width: 40%;
    }
    .works-step{
        margin-bottom: 50px;
    }
    .works-step:last-of-type{
        margin-bottom: 80px;
    }
    .works-step span{
        color: #e67e22;
        border: 2px solid #e67e22;
        display: inline-block;
        border-radius: 50%;
        height: 55px;
        width: 55px;
        text-align: center;
        padding: 5px;
        font-size: 150%;
        margin-right: 25px;
    }
.works-step p { 
display: inline-block;
}
    
    .button-app img{
        height: 50px;
        width: auto;
        margin-right: 10px;
    }

    <section class="section-steps">
       <div class="row">
          <h2>How it works &mdash; simple as 1, 2, 3</h2>
       </div>
       <div class="row">
          <div class="col span_1_of_2 steps-box">
             <img src="Resource/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
          </div>
          <div class="col span_1_of_2 steps-box">
             <div class="works-step">
                <span>1</span>
                <p>Choose the subscription plan that best fits your needs and sign up today.</p>
             </div>
             <div class="works-step">
                <span>2</span>
                <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
             </div>
             <div class="works-step">
                <span>3</span>
                <p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
             </div>
             <a href="#" class="button-app"><img src="Resource/img/download-app.svg" alt="App Store Button"></a>
             <a href="#" class="button-app"><img src="Resource/img/download-app-android.png" alt="Play Store Button"></a>
          </div>
       </div>
    </section>