【前端面试十】清除浮动有几种方式?

程序猿 2021-03-26 21:05:32 1547浏览 加载中

1,低级div定义height

原理:父级div手动定义height.就解决了父级div无法自动获取到高度的问题,简单、代码少,容易掌握,但只适合高度固定的布局,

2,结尾处加空div标签clear: both

原理:在浮动元素的后面添加一个空div兄弟元素,利用Css提高的clear: both清除浮动,让父级div能自动获取到高度,如果页面浮动布局多,就要增加很多空div,让人感觉很不好

3,父级div定义 伪类: after 和zoom

/清除浮动代码*/
.clearfix: after{
    content:"";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    dlear both;
 }
 .clerfrx{zoom:1}

原理: IE8以上和非E浏览器才支持:after,原理和方法2有点类似,zoom(IE 专有属性)可解决ie6,ie5浮动问题,推荐使用,建议定义公共类,以减少CSS代码。

4,父级div定义overflow:hidden超出盒子部分会被隐藏,不推荐使用。

5,双伪元素法

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


标签: 前端面试
最后修改:2024-12-22 21:24:52

非特殊说明,本博所有文章均为博主原创。