Question

我试图使用clearfix方法清除浮点数，但是它不起作用

我使用clearfix方法。我向li元素声明了float。所以我将class（group）添加到ul（因为它是li的父元素），但是它不起作用？为什么？谁能告诉我在哪里上课？注意：我使用占位符，因为图像将可以上传。这是codepen链接： https://codepen.io/Razu381/pen/qwKqXg





<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>index</title>
    <link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
    <section class="section-menu">
    <div class="row">
        <h2>Our Special Items</h2>
    </div>
    <div  class="mels-showcase">
     <ul class="meal-photo ">
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
     </ul>
     <ul class="meal-photo ">
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
     </ul>
     <ul class="meal-photo">
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
     </ul>
    </div>
   <a href="#" class="button">Recommend</a>
 </section>
</body>
</html>


/*---clearfix--*/
.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
}
/*---section-menu---*/

.meal-photo li{
    width: 25%;
    float: left;
    overflow: hidden;
    height: 200px;
}
.meal-photo li img{
    width: 100%;
    display:block;
    overflow: hidden;
}


.button {
  background: #76B3FA;
  border-radius: 100px;
  padding: 20px 60px;
  color: #fff;
  text-decoration: none;
  font-size: 1.45em;
  margin: 0 15px;
}

Answer 1

当您有floats来保存一天时，为什么要使用flex？

.mels-showcase {
  margin-bottom: 2em;
}

.meal-photo {
  display: flex;
  flex-wrap: wrap;
}

.meal-photo li {
  width: 25%;
  overflow: hidden;
}

.meal-photo li img {
  width: 100%;
  display: block;
  overflow: hidden;
}

.button {
  background: #76B3FA;
  border-radius: 100px;
  padding: 20px 60px;
  color: #fff;
  text-decoration: none;
  font-size: 1.45em;
  margin: 0 15px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>index</title>
  <link rel="stylesheet" href="resources/css/style.css">
</head>

<body>
  <section class="section-menu">
    <div class="row">
      <h2>Our Special Items</h2>
    </div>
    <div class="mels-showcase">
      <ul class="meal-photo ">
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>


        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>


        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
        <li><img src="https://via.placeholder.com/150"></li>
        <li><img src="https://via.placeholder.com/150" alt=""></li>
      </ul>
    </div>
    <a href="#" class="button">Recommend</a>
  </section>
</body>

</html>

说明：

我没有使用<ul class="meal-photo ">来表示每行4个元素，而是确保有一个父级ul，而所有li都是子级。

父ul被授予display中的flex

.meal-photo {
  display: flex;
  flex-wrap: wrap;
}

通过为每个li设置25％的宽度，我们确保每行仅显示4个

.meal-photo li {
  width: 25%;
  overflow: hidden;
}

最后，我们在mels-showcase的底部留出空白，为按钮提供了喘息的空间

.mels-showcase {
  margin-bottom: 2em;
}

关于浮动和清除

1 个答案: