這篇文章主要介紹了web開發(fā)中如何清除浮動，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
一、浮動
說浮動就必須提及一下文檔流，HTML當(dāng)中的元素按照從左到右，從上到下的順序進(jìn)行排列稱之為文檔流，也就是正常排列。
而浮動是什么呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之后的元素發(fā)現(xiàn)A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之后(PS:但是文字并不會無視它，還會環(huán)繞A元素，也就是A元素沒有脫離文字流。
而如果使用position的絕對定位會連文字流也脫離文檔流。
浮動的好處當(dāng)然是布局了，例如通過浮動來形成三列布局，文字環(huán)繞等等。但是浮動也有一個問題，那就是會導(dǎo)致高度的塌陷，就像上面的圖片顯示，父元素的高度塌陷了，并沒有將浮動的子元素包裹進(jìn)去，這樣子就會造成布局上的錯誤。
二、BFC
什么是BFC？BFC是Block Formatting Context的縮寫，也就是塊級格式化上下文，創(chuàng)建BFC有以下情況：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何一個。
position的值不為relative和static。
BFC的特性就是包裹浮動的元素。按照我的理解，當(dāng)你創(chuàng)建BFC之后元素就會把里面的東西視為自己的東西，包括浮動元素，然后創(chuàng)建一個私有領(lǐng)域給包裹進(jìn)來。此外BFC還有還有如下特性。
1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入一個父盒子，然后為父盒子創(chuàng)建BFC。
2.創(chuàng)建BFC的元素將不會圍繞浮動元素，圖中文字用p標(biāo)簽包裹并創(chuàng)建BFC，右上角浮動元素，可以看見文字并沒有環(huán)繞浮動元素。
三、 清除浮動的方法
清除浮動方法大致有兩類，一類是clear:both | left | right ,另一類則是創(chuàng)建BFC,細(xì)分又可以分為多種。
1.通過在浮動元素末尾添加一個空的標(biāo)簽例如并設(shè)置樣式為clear:both | left | right ，其他標(biāo)簽br等亦可。
優(yōu)點(diǎn)：簡單。
缺點(diǎn)：增加了額外的標(biāo)簽，并且很顯然這并不符合語義化。
*使用 br標(biāo)簽和其自身的 html屬性，br 有 clear=all | left | right | none；的屬性。
優(yōu)點(diǎn)：簡單代碼量少，比空標(biāo)簽語義化稍好。
缺點(diǎn)：增加了額外的標(biāo)簽，并且很顯然這并不符合語義化。
2.使用::after偽元素(萬金油方法)
ps:由于IE6-7不支持:after，使用`zoom:1觸發(fā)hasLayout。其實(shí)是通過 content 在元素的后面生成了內(nèi)容為空的塊級元素
代碼如下：
重慶分公司
重慶分公司
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;//這一條可以省略，證明請看原文精益求精部分
clear:both;
}.clearfix {
zoom:1;
}優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量居中。
缺點(diǎn)：復(fù)用方式不當(dāng)會造成代碼量增加。
偽元素還有一種寫法：
// 用display:table 是為了避免外邊距margin重疊導(dǎo)致的margin塌陷, 內(nèi)部元素默認(rèn)會成為 table-cell 單元格的形式
.clearfix:before, .clearfix:after { content:""; display:table;}
.clearfix:after{ clear:both; overflow:hidden;}
.clearfix{ zoom:1; }3.父元素設(shè)置 overflow：hidden,(PS:在IE6中還需要觸發(fā) hasLayout ，例如 zoom:1)
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少。
缺點(diǎn)：由于hidden的原因，當(dāng)內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素，還會導(dǎo)致中鍵失效（鼠標(biāo)中鍵）。
4.父元素設(shè)置 overflow：auto 屬性
優(yōu)點(diǎn)：同上
缺點(diǎn)：多個嵌套后，會有bug，詳情看原文。
5.父元素也浮動
優(yōu)點(diǎn)：代碼少
缺點(diǎn)：總不能一直浮動到body吧。
6.父元素設(shè)置display:table
優(yōu)點(diǎn)：結(jié)構(gòu)語義化完全正確，代碼量極少。
缺點(diǎn)：會造成盒模型的改變。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享web開發(fā)中如何清除浮動內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!
