伪元素的应用以及伪元素清除浮动

1.伪元素定义

概念：在当前元素内容的前面或者后面追加一个虚拟的标签

特点：

（1）.伪元素由CSS渲染，不会增加DOM开销；

（2）.伪元素默认为行内样式，可以转化成块级处理；

（3）.伪元素不管有没有内容，content这是值不能少，即使没有也要写成空；

（3）.伪元素官方推荐写成双冒号但为了兼容，写成单冒号；

（5）.因为伪元素是CSS渲染，js获取不到。

    <style>
        .box::before{
content:'飞飞';
font-size: 30px;
        }
        .box::after{
content:'20';
font-size: 30px;
        }
    </style>

    <div class="box">
        的年龄是
    </div>

2.伪元素清除浮动

<style>

.contain{

    width: 500px;

    border: 1px solid #000;

}

.box{

    width: 300px;

    height: 300px;

    background-color: red;

    float: left;

}

.clearfix:after{

    content:'';

    clear: both;

    display: block;

    height: 0;

    visibility: hidden;

}

.clearfix{

    *zoom: 1;

}

</style>

    

 

<div class="contain clearfix">

<div class="box"></div>

</div>