当前位置:  首页  >  前端开发  >  CSS+DIV

什么是BFC?有什么用?

css快速入门:BFC即块格式化上下文,它是页面CSS视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响的一个区域。作用:1、阻止外边距折叠;2、包含浮动的元素;3、阻止元素被浮动元素覆盖。

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

从上面可以看出,我们给两个p元素都设置margin,但中间的间距却发生了折叠。然后举个BFC的例子:

.ele{
    overflow: hidden;
    border: solid 1px red;
}

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

从运行结果可以看出,如果块级元素里面包含着浮动元素会发生高度塌陷,但是将它变成一个BFC后,BFC在计算高度时会自动将浮动元素计算在内。

3、BFC可以阻止元素被浮动元素覆盖

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

从上面看出,当元素浮动后,会与后面的块级元素产生相互覆盖。那怎么解决这个问题,只要为后面的元素创建一个BFC。添加overflow属性到box2上。

overflow: hidden;
*zoom: 1;

这样子阻止了浮动元素重叠的问题。

以上就是什么是BFC?有什么用?的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有