时间戳

首页 > 解决方案 > 关于浮动和清除

html - 关于浮动和清除

问题描述

我尝试使用 clearfix 方法清除浮动，但它不起作用

我使用clearfix方法。我将浮动声明到li元素。所以我将类（组）添加到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;
}

标签： htmlcss

解决方案

为什么要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>

解释：

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

父 ul 被赋予display一个flex

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

通过为 each 设置 25% 的宽度li，我们确保每行仅出现 4 个

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

最后，我们提供了一个边距底部，mels-showcase为按钮提供一些喘息的空间

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

推荐阅读