伪类选择器：爱恨法则；伪元素选择器：before，after；清除浮动

伪类选择器：爱恨法则

link：超链接未访问时的状态
visited:超链接访问过后的状态
hover：鼠标悬停时的状态
active：激活时的状态（一般为鼠标按下时）
这四个连用时，需要按照顺序，即love hate：爱恨法则（因为层叠样式表会覆盖，a:伪类四个权重都一样，当你按下鼠标左键的时候想要的是鼠标按下时的样式，而不是别的样式，所以将active写在最下面，假如active写在hover上面的话，这时候因为同时触发了active和hover两个伪类，两个颜样式都会显示，这时候有冲突的话看权重，权重一样的话下面的会覆盖上面的，这样的话active的样式就不会触发，别的同理）

a:link{
color:red;
}
a:visited{
color:blue;
}
/*上面两种一般只能用在a元素上*/
a:hover{
color:green;
}
/*hover基本所有元素都可以使用*/
a:active{
color:black;
}
/*active一般用于button或者a元素上/

伪元素选择器：before，after

伪元素选择器一般配合别的选择器进行连用：比如

div::before{
content:'♥'
}

在div这个元素内整体的前面加个♥，after同理在元素内整体的后面
一般用来给元素前面或者后面加些特殊符号
我们常用after和before给元素清除浮动
（浮动：当我们给子节点设置浮动float的的时候，脱离了文档流，这时候没有给父节点设置高度，父节点的高度会坍塌，但一般又不确定有多少子节点，不好给父节点设置高度，所以就需要清除浮动，否则父节点的兄弟节点会被子节点覆盖住）

/*单after清除浮动*/
.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }

/*双after，before清除浮动*/
.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
/*下面的*zoom: 1;是为了兼容IE*/

清除浮动还可以在父元素后面加一个元素clear：both；(额外标签法，一般不推荐使用)

<style>
.clear{
clear:both;
}
</style>
<div>
<div class='clear'></div>
</div>

BFC清除浮动（把父节点变成BFC，因为BFC计算总高度时会计算福哦党的高度），父节点只要满足下面条件之一：
float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex