今天的文章我們繼續(xù)上一篇文章的主題恩溅，和大家談一下我對于浮動清除問題上的一些理解造锅。今天也不多說了原献，直接接上上篇文章的內(nèi)容。
清除浮動的常用方式
（1標(biāo)題內(nèi)容和其他內(nèi)容請見上一篇文章）
2盐数，設(shè)置BFC（塊級格式化上下文）來清除浮動
我這個分類方式可能比較少見棒拂，但我覺得這樣說可以讓大家更好的理解清除浮動的這一類方法的實(shí)現(xiàn)原理。不知道大家還記不記得BFC會產(chǎn)生一些什么效果（如果不記得了我推薦你去看看我前面的文章，也很近帚屉，沒差幾天）谜诫？不一定要記全，這里我們主要需要其中的一個性質(zhì)：能夠包含浮動元素攻旦。
大家回憶一下為什么我們需要清除浮動呢喻旷？因?yàn)檎５脑卦谝恍┣闆r下不能包含浮動，會和我們設(shè)想的布局存在差異牢屋，那BFC能夠包含浮動元素自然就可以用來清除浮動元素咯且预。那接下來我們思考下具體要怎么去做呢？很簡單烙无，就是生產(chǎn)BFC的那些方法啊锋谐，這里我給大家回憶下：
- 塊級元素的非塊級容器，典型的就是display: inline-block
- overflow不為visible的塊級盒子
- 絕對定位或浮動元素
如果大家看過別的相關(guān)文章應(yīng)該就會發(fā)現(xiàn)很多清除浮動的方法也就在上面的三個內(nèi)容之中了截酷。
3涮拗，通過clear:both來實(shí)現(xiàn)
這個方法可以說是官方給我們準(zhǔn)備的方法了。在CSS中有一個clear屬性迂苛，就是專門清除浮動的三热，它決定了元素周圍不允許浮動的位置，主要為三個值：left灾部，right康铭，both惯退。即對應(yīng)左赌髓，右，兩邊催跪。我們通乘洌可以直接通過both直接清除浮動，但具體操作上還有一些細(xì)節(jié)懊蒸，我這里就主要給大家介紹兩種實(shí)現(xiàn)方法：
1）添加空的<div>荣倾，并為其添加clear:both
具體實(shí)現(xiàn)請看下面的樣例代碼：
<style>
.parent{
border: 1px solid #000;
}
.child{
width: 100px;
height: 100px;
float: left;
border: 1px solid #000;
}
.clear{
clear: both;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="clear"></div>
</div>
看了這個大家應(yīng)該懂了吧，這種方法屬于過去使用最多的方法骑丸，其特色就是簡單直接舌仍，但缺點(diǎn)也同樣明顯，這一方法在HTML中添加了一個無意義的<div>內(nèi)容通危，這是會破壞結(jié)構(gòu)的铸豁。雖然其實(shí)大多數(shù)時候我也不知道這樣做的問題會導(dǎo)致什么，但總歸是不太好的嗎=菊碟。=节芥，現(xiàn)在已經(jīng)不推薦使用這種方法了。
2）通過偽類:after來清除浮動
這個方法是現(xiàn)在最推薦的方法，整體上來說就現(xiàn)階段的技術(shù)头镊，應(yīng)該是最好的方法蚣驼，和上面相同，我們先上例子：
<style>
.parent{
border: 1px solid #000;
}
.child{
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
}
.clearfloat:after{
display: block;
clear: both;
visibility: hidden;
content: "";
height: 0;
}
.clearfloat{
zoom: 1;
}
</style>
<div class="parent clearfloat">
<div class="child"></div>
<div class="child"></div>
</div>
這個方法又是怎么個實(shí)現(xiàn)原理呢相艇？我先和大家講一下:after這個偽類的效果吧颖杏，這個偽類的效果是在元素后添加一個元素，這個元素的屬性也是單獨(dú)設(shè)置了厂捞，其中有個content對應(yīng)的是元素內(nèi)填寫的內(nèi)容输玷，別的都是常見的內(nèi)容。知道這個內(nèi)容再結(jié)合上面的例子大家應(yīng)該就懂了吧靡馁，其實(shí)這個方法也相當(dāng)于上面的方法欲鹏，添加了一個clear:both的空元素，但這個方法是直接加在原有元素上臭墨，不會破壞結(jié)構(gòu)赔嚎，至于zoom: 1則是專門為了處理兼容性問題，只有IE8以上和非IE瀏覽器才支持:after偽類胧弛，但zoom: 1可以解決IE8一下瀏覽器的浮動問題尤误。
寫到這里呢，今天的文章就結(jié)束了结缚，關(guān)于清除浮動問題我個人的理解也就是這個樣子损晤，希望對大家有幫助吧。
