css清除浮動的方法：1、浮動代碼后添加一個設(shè)置了“clear:both”樣式的空div標(biāo)簽。2、給父級元素添加一個設(shè)置“clear:both;”樣式的after偽元素。3、給父元素設(shè)置“overflow: auto”樣式。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在我們寫代碼的時候，有時因為使用了float浮動元素而導(dǎo)致頁面中某些元素不能正確的顯示。

但使用float浮動元素后，會有一些不好的影響：

（1）由于浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后，因為浮動元素脫離文檔流不占據(jù)原來的位置
（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結(jié)構(gòu)顯示

這個時候就需要清除浮動了，下面介紹一些css清除浮動的方法。

（1）使用clear:both清除浮動

在代碼中在放一個空的div標(biāo)簽，然后給這個標(biāo)簽設(shè)置clear:both來清除浮動對頁面的影響。它的優(yōu)點是簡單，方便兼容性好，但是一般情況下不建議使用該方法，因為會造成結(jié)構(gòu)混亂，不利于后期維護

<div style="clear: both"></div>

（2）利用偽元素clearfix來清除浮動

給父級元素添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的

.clearfix:after{     content:"";     display:block;     visibility:hidden;     clear:both;     }

（3）使用CSS的overflow屬性

當(dāng)給父元素設(shè)置了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了，它的本質(zhì)就是建構(gòu)了一個BFC，這樣使得達到撐起父元素高度的效果

.box{ border:1px solid #ccc; background:#eff2f4; overflow: auto }

（學(xué)習(xí)視頻分享：css視頻教程）