簡(jiǎn)述清除浮動(dòng)

FuisonDesign 發(fā)布于2019-08-29 12:35 / 501人閱讀

摘要：為什么要清除浮動(dòng)影響其他元素定位父盒子高度為，子盒子全部浮動(dòng)定位，子盒子不會(huì)撐開父盒子，下面的元素會(huì)到子盒子的下面。清除浮動(dòng)方法總結(jié)對(duì)父級(jí)元素設(shè)置高度對(duì)父級(jí)設(shè)置適合高度樣式清除浮動(dòng)，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。

為什么要清除浮動(dòng)？

1、影響其他元素定位
父盒子高度為0，子盒子全部浮動(dòng)、定位，子盒子不會(huì)撐開父盒子，下面的元素會(huì)到子盒子的下面。

2.背景圖片或顏色不能正常顯示
由于浮動(dòng)產(chǎn)生，如果對(duì)父級(jí)設(shè)置了CSS背景顏色或CSS背景圖片，而父級(jí)不能被撐開，所以導(dǎo)致CSS背景不能顯示。

3、外邊距內(nèi)邊距設(shè)置影響
由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。

清除浮動(dòng)方法總結(jié)：

1、對(duì)父級(jí)元素設(shè)置高度
對(duì)父級(jí)設(shè)置適合高度樣式清除浮動(dòng)，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置（高度設(shè)置為：內(nèi)容高度+padding+border）。

2、clear:both清除浮動(dòng)
我們?cè)诟讣?jí)“

”結(jié)束前加div引入“class="clear"”樣式,這樣就可以清除浮動(dòng)了。

//html部分
 
  left（向左浮動(dòng)） 
  right(向右浮動(dòng)） 
   
 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px; 
  border:1px solid #00F;background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right {
  float:right;
} 
.clear {
  clear:both;
}

3、overflow:hidden清除浮動(dòng)
對(duì)父級(jí)CSS選擇器加overflow:hidden樣式，可以清除使用的float產(chǎn)生浮動(dòng)。【BFC有三大特性:(1)BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊.(2)BFC不會(huì)重疊浮動(dòng)元素.(3)BFC可以包含浮動(dòng).我們可以利用BFC的第三條特性來“清浮動(dòng)”，這里其實(shí)說清浮動(dòng)已經(jīng)不再合適了，應(yīng)該說用BFC來包含浮動(dòng)。（還想深入了解BFC的可以參看“https://www.w3.org/TR/CSS21/v...”的詳細(xì)描述）】

//html部分
 
  left（向左浮動(dòng)） 
  right(向右浮動(dòng)） 
   
 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
  overflow:hidden;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px;
  border:1px solid #00F;
  background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right { 
  float:right;
}

4、單偽元素//雙偽元素清除浮動(dòng)
單偽元素清除浮動(dòng)原理：通過:after 偽類在浮動(dòng)塊后面加上一個(gè) display:none 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動(dòng)。

.clearfix:after {
  content:" ";  /*必須為空*/
  visibility:hidden;
  display:block;
  height:0
  font-size:0;
  clear:both;
}

.clearfix {
  zoom:1;        /*兼容IE瀏覽器*/  
}

雙偽元素清除浮動(dòng)原理：通過:after 偽類在浮動(dòng)塊后面加上一個(gè) display:table 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動(dòng)。（注意：這里隱藏這個(gè)空白使用的是 display: table，而不是設(shè)置 visibility:hidden;height:0;font-size:0;與單偽元素清除浮動(dòng)有所區(qū)別）

.cearfix:before, .cearfix:after {
   content:" ";    /*必須為空*/
   display:table;
}
.cearfix:after {
  clear:both;
}
.cearfix {
  zoom:1;     /*兼容IE瀏覽器*/
}

總結(jié)：

第一種方法：簡(jiǎn)單，容易掌握，但只適合高度固定的布局，不推薦使用可以了解。
第二種方法：簡(jiǎn)單，瀏覽器支持好，但如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很麻煩，不推薦使用，可以了解。
第三種方法：代碼少，瀏覽器支持，不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏，只推薦沒有使用position的布局使用。
第四種方法：瀏覽器支持好,建議使用。