首頁技術(shù)文章正文

CSS中有多少種清除浮動的方法?哪種更常用?

更新時間:2021-08-09 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

方式一:使用overflow屬性來清除浮動

方式二:使用額外標(biāo)簽法

.clear{
  clear:both;
}

在浮動的盒子之下再放一個標(biāo)簽,在這個標(biāo)簽中使用clear:both,來清除浮動對頁面的影響.

內(nèi)部標(biāo)簽:會將這個浮動盒子的父盒子高度重新?lián)伍_.

外部標(biāo)簽:會將這個浮動盒子的影響清除,但是不會撐開父盒子.

注意:一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標(biāo)簽,造成結(jié)構(gòu)的混亂.


方法三:使用偽元素來清除浮動(after意思:后來,以后)

.clearfix:after{
  content:"";//設(shè)置內(nèi)容為空
  height:0;//高度為0
  line-height:0;//行高為0
  display:block;//將文本轉(zhuǎn)為塊級元素
  visibility:hidden;//將元素隱藏
  clear:both//清除浮動
}
.clearfix{
  zoom:1;為了兼容IE
}


方法四:使用雙偽元素清除浮動

.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
 }


總結(jié):第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到,第二種方法會增加許多不必要的標(biāo)簽,

所以我們盡量使用第三種方法來清除浮動,為什么不選擇第四種方法呢?因為第四種是第三種的改良版雖然比較簡便,但是不嚴謹!





猜你喜歡:

頁面布局的排列規(guī)則是什么?怎樣清除浮動標(biāo)簽?

有序列表標(biāo)簽的基本屬性簡介【前端web文章】

nav標(biāo)簽怎么用?nav標(biāo)簽的有什么作用?

nav標(biāo)簽怎么用?nav標(biāo)簽的有什么作用?

黑馬程序員web前端與移動開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!