什么是BFC？有什么用？_WEB前端开发

table 中 cellspacing 与 cellpadding 区别_WEB前端开发

这篇文章主要介绍了table中cesllspacing与cellpadding的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

BFC

（推荐教程：css快速入门）

即块格式化上下文（block formatting context） 是页面 CSS 视觉渲染的一部分。

它是用于决定块盒子的布局及浮动相互影响的一个区域。

我的理解：

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

作用：

1、阻止外边距折叠

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

我们先来看看例子：

CSS 布局之两端布局实现_WEB前端开发

这篇文章主要介绍了css 布局 之 两端布局 （利用父级负的margin）的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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

*{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？有什么用？的详细内容，更多请关注ki4网其它相关文章！

ps的图层在哪里可以显示出来？_WEB前端开发

ps的图层可以在“窗口”菜单中的“图层”中显示。

显示方法：1、打开ps，点击菜单栏中的“窗口”，再点击“图层”；2、鼠标拖动图层面板至想要放的位置即可。