什么是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？有什么用？的细致内容，更多请关注 百分百源码网 其它相干文章！