CSS浮动清除浮动使用，伪元素使用

一、清除浮动

        html部分：

          <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
          </div>

        CSS部分：

//CSS浮动练习
.wrapper{
  // float: left;或position:absolute; 
  //清除浮动的一种方式：父级元素也浮动；但是父元素宽度不是100%变成块级了
  //凡是这样设置，打内部把元素转换成inline-block
  border: 1px solid black;
}
.wrapper::after{  //清除浮动
  content: "";
  clear: both; //如果想让clear生效，伪元素必须是块级元素
  display: block;
}
.content{
  float: left;
  width: 100px;
  height: 100px;
  background-color: #409eff;
  color: #fff;
}

二、伪元素使用

        html部分：

          <!-- 伪元素 -->
          <span>很帅</span>

        CSS部分：

//伪元素(天生是行级元素，可以当正常元素使用)
span::before{
  content: ""; //必须加
  display: inline-block; //伪元素默认是行内元素
  width: 50px;
  height: 50px;
  background-color: #409eff;
}