html - float 元素在父 div 之外

Question

我在使用 float UL 时遇到了麻烦。我已经将几个 UL 向左浮动，在我这样做之后，它们最终位于父 div 之外。我已将 overflow: hidden 添加到父 div 但没有成功。任何帮助将不胜感激。

ul li {
  overflow: hidden;
}

.competitive_analysis {
  overflow: hidden;
  margin-bottom: 8%;
}

.clean_sense {
  float: left;
  margin: 0 auto;
  width: 25%;
}

.jan_pro {
  float: left;
  margin: 0 auto;
  width: 25%;
}

.maids {
  float: left;
  width: 25%;
}

.molly_maids {
  float: left;
  width: 25%;
}

<div class="competetive_analysis">
  <h2> Competetive Analysis</h2>
  <h3> Website Keywords</h3>
  <p> Tampa, Florida, Apartment Cleaning, Ozone, Apartments, Residents, Clean Sense, Grout Cleaning, Pasco County, Hillsborough County, Pinellas County, Sarasota County</p>

  <div class="clean_sense">
    <ul>
      <li> <strong>Clean Sense</strong></li>
      <li>Global Rank: N/A</li>
      <li>Bounce Rate: N/A</li>
      <li>Daily Time On-Site: N/A</li>
    </ul>
  </div>

  <div class="jan_pro">
    <ul>
      <li> <em>Jan-Pro</em></li>
      <li>Global Rank: 574,373</li>
      <li>Bounce Rate: %57.10</li>
      <li>Daily Time On-Site: 2:54</li>
    </ul>
  </div>


  <div class="maids">
    <ul>
      <li> <em>Maids</em></li>
      <li>Global Rank: 205,032</li>
      <li>Bounce Rate: %56.60</li>
      <li>Daily Time On-Site: 1:60</li>
    </ul>
  </div>

  <div class="molly_maids">
    <ul>
      <li> <em>Molly Maids</em></li>
      <li>Global Rank: 124,641</li>
      <li>Bounce Rate: %41.50</li>
      <li>Daily Time On-Site: 5:44</li>
    </ul>
  </div>
</div>

Answer 1

html“competitive_analysis”中的类名与 css“competitive_analysis”中的类名存在拼写错误(而不是不匹配)