重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

css中的BFC是什么

css中的BFC是什么?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

10年积累的成都做网站、成都网站设计、成都外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有五常免费网站建设让你可以放心的选择与我们合作。

BFC

即块格式化上下文(block formatting context) 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。

我的理解:

BFC是一个环境,在这个环境中的元素不会影响到其他环境中的布局,也就是说,处于不同BFC中的元素是不会互相干扰的。

作用:

1、阻止外边距折叠

两个相连的块级元素在垂直上的外边距会发生叠加,有些把这种情况看作是bug,但我觉得可能是出于段落排版的考虑,为了令行间距一致才有的这一特性。我们先来看看例子:

css中的BFC是什么

*{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;
}

css中的BFC是什么

从上面可以看出,我们为每个div元素设置overflow的值为hidden,产生一个块级格式上下文,因为外边距不会相互重叠。

2、BFC可以包含浮动的元素

css中的BFC是什么

*{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可以阻止元素被浮动元素覆盖

css中的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;

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

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


新闻名称:css中的BFC是什么
文章转载:http://cqcxhl.cn/article/pssjjp.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP