【前端面試十】清除浮動(dòng)有幾種方式?

程序猿 2021-03-26 21:05:32 1730瀏覽 加載中

1,低級(jí)div定義height

原理:父級(jí)div手動(dòng)定義height.就解決了父級(jí)div無法自動(dòng)獲取到高度的問題,簡(jiǎn)單、代碼少,容易掌握,但只適合高度固定的布局,

2,結(jié)尾處加空div標(biāo)簽clear: both

原理:在浮動(dòng)元素的后面添加一個(gè)空div兄弟元素,利用Css提高的clear: both清除浮動(dòng),讓父級(jí)div能自動(dòng)獲取到高度,如果頁面浮動(dòng)布局多,就要增加很多空div,讓人感覺很不好

3,父級(jí)div定義 偽類: after 和zoom

/清除浮動(dòng)代碼*/
.clearfix: after{
    content:"";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    dlear both;
 }
 .clerfrx{zoom:1}

原理: IE8以上和非E瀏覽器才支持:after,原理和方法2有點(diǎn)類似,zoom(IE 專有屬性)可解決ie6,ie5浮動(dòng)問題,推薦使用,建議定義公共類,以減少CSS代碼。

4,父級(jí)div定義overflow:hidden超出盒子部分會(huì)被隱藏,不推薦使用。

5,雙偽元素法

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


標(biāo)簽: 前端面試
最后修改:2025-04-05 02:55:57

非特殊說明,本博所有文章均為博主原創(chuàng)。

国产免费久久受久久,人妻AV成熟片久久久久久,亚洲综合无码日韩,国产AV无码乱码精品国产 www.sucaiwu.net