Html 关于浮动和清除_Html_Css

Html 关于浮动和清除

html css

Html 关于浮动和清除,html,css,Html,Css,我尝试使用clearfix方法清除浮动，但它不起作用我使用clearfix方法。我向li元素声明了float。所以我将类（组）添加到ul（因为它是li的父元素），但它不工作？为什么？有人能告诉我在哪里上课吗？注意：我使用占位符作为图片上传时间。以下是代码笔链接：指数我们的特别商品 /*---clearfix--*/ .小组：之前， .小组：之后{ 内容：“；显示：表格； } .小组：之后{ 明确：两者皆有； } .组{ 缩放：1； } /*--

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

我使用clearfix方法。我向li元素声明了float。所以我将类（组）添加到ul（因为它是li的父元素），但它不工作？为什么？有人能告诉我在哪里上课吗？注意：我使用占位符作为图片上传时间。以下是代码笔链接：


指数
我们的特别商品


















/*---clearfix--*/
.小组：之前，
.小组：之后{
内容：“；
显示：表格；
}
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；
}
/*---区段菜单---*/
.用餐照片李{
宽度：25%；
浮动：左；
溢出：隐藏；
高度：200px；
}
.li img用餐照片{
宽度：100%；
显示：块；
溢出：隐藏；
}
.按钮{
背景：#76B3FA；
边界半径：100px；
填充：20px 60px；
颜色：#fff；
文字装饰：无；
字号：1.45em；
利润率：0.15px；
}

当你有

flex

来保存一天时，为什么要使用

浮动

.mels showcase{
边缘底部：2米；
}
.用餐照片{
显示器：flex；
柔性包装：包装；
}
.用餐照片李{
宽度：25%；
溢出：隐藏；
}
.li img用餐照片{
宽度：100%；
显示：块；
溢出：隐藏；
}
.按钮{
背景：#76B3FA；
边界半径：100px；
填充：20px 60px；
颜色：#fff；
文字装饰：无；
字号：1.45em；
利润率：0.15px；
}


指数
我们的特别商品

您没有使用清除-上面的html中没有

组

或

清除

类。。。将

overflow:hidden

添加到

ul.fine照片中

以清除浮动…可能的指导，实际上，我以前和现在都尝试过，但都不起作用。请参阅





<!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;
}