清浮動(dòng)的兩種情況：
1.父級沒有高度時(shí)署浩，父級的高度是由子元素?fù)伍_的循集，但子元素浮動(dòng)后，父元素的高度無法被撐開窿撬，所以需要清浮動(dòng)启昧；
2.新加入的兄弟級標(biāo)簽，希望不受之前浮動(dòng)元素的影響劈伴，則需要清浮動(dòng)密末。
清除浮動(dòng)的五種常用方法：
1.空標(biāo)簽清浮動(dòng)
給空標(biāo)簽設(shè)置clear : both;
優(yōu)點(diǎn)：簡單易懂，容易掌握跛璧；
缺點(diǎn)：會出現(xiàn)大量無語義的空標(biāo)簽苏遥，不利于維護(hù)。
補(bǔ)充：clear清浮動(dòng)
書寫方式——clear : left / right / none / both;
left : 左側(cè)不允許有浮動(dòng)元素赡模；
right : 右側(cè)不允許有浮動(dòng)元素田炭；
none : 允許浮動(dòng)元素在兩側(cè)；
both : 不允許浮動(dòng)漓柑。
2.<br>標(biāo)簽清浮動(dòng)
<br>標(biāo)簽自帶屬性：<br clear = "all" />;
優(yōu)點(diǎn)：比空標(biāo)簽清浮動(dòng)方式語義性較強(qiáng)教硫；
缺點(diǎn)：結(jié)構(gòu)與樣式未分離。
3.父級設(shè)置overflow
原理：讓父級能夠緊貼其內(nèi)容辆布，實(shí)現(xiàn)清浮動(dòng)瞬矩；
overflow：hidden | auto ;
hidden：超出內(nèi)容隱藏；
auto：默認(rèn)屬性锋玲，在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條景用；
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題；
缺點(diǎn)：hidden在內(nèi)容增多時(shí)會導(dǎo)致內(nèi)容被隱藏；
? ? ? ? ? ? auto在多個(gè)嵌套后伞插，有時(shí)會造成內(nèi)容全選割粮；
4.子級元素浮動(dòng)，父級元素也浮動(dòng)
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題媚污，代碼量少舀瓢；
缺點(diǎn)：使得與父級相鄰的元素的布局會受影響。
5.after偽元素清浮動(dòng)
原理：相當(dāng)于用一個(gè)高度為0的塊來代替空標(biāo)簽耗美；
.clearfix : after {
? ? display: block;
? ? clear: both;
? ? height: 0;
? ? content: “\200B”;
}
優(yōu)點(diǎn)：結(jié)構(gòu)語義化正確京髓，代碼量少；
缺點(diǎn)：盒模型屬性已改變商架。
偽元素的特性
偽元素after和before的特性
兩個(gè)偽元素會在頁面元素之前或之后插入一個(gè)元素
偽元素在頁面中生成的元素是行元素
偽元素after和before兼容
.test : before, .test? before {}
.test : after, .test? after {}
說明：一個(gè)是冒號分隔堰怨，一個(gè)是空格分隔。
前者兼容IE8+及其它現(xiàn)代瀏覽器蛇摸；后者兼容IE6/7诚些。
