清除浮动问题

请问老师，如何用伪元素after清除浮动

代码：

.course>ul>li>h1:after{

content: "";

clear: both;

}

源码：

<template>
    <div class="course">
        <ul>
            <li>
                <img src="../../assets/course1.jpg" />
                <h1>实例秒解Sed和Awk的秘密</h1>
                <h3>中级</h3>
            </li>
        </ul>
    </div>
</template>
<style scoped>
    .course{
        width: 750px;
        overflow-y: scroll;
        overflow-x: hidden;    
    }
    .course>ul{
      font-size: 0;
    }
    .course>ul>li{
        padding-top: 43px; 
        position: absolute;
      width: 750px;
      
      background: yellow;
    }
    .course>ul>li>img{
       float: left;
      padding-right: 29px;
        border-radius:20px;
        width: 218px;
        height: 145px;
        padding-left: 38px;
     
    }
    .course>ul>li>h1{
        float: left;
        display: flex;
        font-size: 28px;
        font-weight: 00;
  
    }
    .course>ul>li>h1:after{
        content: ""; 
        clear: right;
    }
    .course>ul>li>h3{
        float: left;
        font-size: 16px;
        font-weight:10;
        color: #a0a4a8;
    }
 
</style>

小巧的蜗牛 2018-06-07

源自：项目：Vue搭建课程首页 3-4 课程列表组件实现

收起

1回答

小于飞飞回答被采纳获得+3积分 2018-06-08 09:27:48

思路，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。如下：

根据思路，动手实践，希望解答你的疑惑，祝学习愉快。

收起回答

小巧的蜗牛提问者 #1

请问为什么height会是0?

2018-06-12 08:22:43
小于飞飞回复提问者小巧的蜗牛 #2

指的的是clearfix:after 里的height ，如是，1. 这是清楚浮动一种规定方法。2. 目的是清楚浮动，不是让它显示出来，所以内容为空，高为0，呈现一个看不见的块元素，但是起到清理浮动作用，希望解答你的疑惑，祝学习愉快。

2018-06-12 09:30:20
小巧的蜗牛提问者 #3

哦哦，谢谢，还有个问题，请问，zoom:1的作用是什么？

2018-06-13 08:11:23