偽類選擇器：愛恨法則；偽元素選擇器：before，after；清除浮動

偽類選擇器：愛恨法則

link：超連結未訪問時的狀態
visited:超連結訪問過後的狀態
hover：滑鼠懸停時的狀態
active：啟用時的狀態（一般為滑鼠按下時）
這四個連用時，需要按照順序，即love hate：愛恨法則

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