About float and clear

Question

I tried to clear floats using the clearfix method, but it does not work

I use the clearfix method.i declared float to the li elements.so I add the class(group) to the ul(as it is the parent element of li)but it's not working? why? could anyone please tell me where should I use the class? note: I use placeholders as images will time to upload. Here's the codepen link: 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;
}

you are not using the *clear* - there are no `group` or `clear` classes in the html above... add `overflow: hidden` to the `ul.meal-photo` to *clear* the floating... — kukkuz, Apr 20 '19 at 17:57
possible guidance [here](https://stackoverflow.com/questions/39684091/html-list-isnt-vertically-aligned-when-using-floating-images/39684113#39684113) and [here](https://stackoverflow.com/questions/39311775/make-column-and-main-content-stay-on-left-or-right-as-browser-is-resized/39313556#39313556) — kukkuz, Apr 20 '19 at 18:00

Jibin Joseph · Accepted Answer · 2019-04-20T18:19:13.147

Why use floats when you have flex to save the day?

.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>

Explanation:

Instead of using a <ul class="meal-photo "> to represent each row of 4 elements, I made sure there was single parent ul with all the li as children.

The parent ul is given a display of flex

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

By setting a width of 25% for each li, we ensure only 4 appear in each row

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

Finally we provide a margin bottom to mels-showcase to provide some breathing room for the button

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

About float and clear

1 Answers1