【前端面试之CSS】如果是一个元素具备BFC属性，该元素有啥特点?

阿卡内

已于 2022-08-04 22:26:25 修改

阅读量275

点赞数

分类专栏： CSS系列知识点文章标签： css 前端面试

于 2022-07-18 22:07:25 首次发布

本文链接：https://blog.csdn.net/qq_40695234/article/details/125861324

版权

CSS系列知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1、什么是BFC
2、BFC布局规则
3、哪些元素会产生BFC
4、在布局中BFC的应用场景

1、什么是BFC

根据w3c的标准，在页面中元素都含有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭。默认是关闭。
BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

注意：具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，同样容器外的元素也不会影响到容器内的元素的布局。

2、BFC布局规则

内部的Box会在垂直方向，一个接一个的放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与包含块border box的左边相接触。
BFC区域不会和float box重叠，而是会紧贴浮动元素。

3、哪些元素会产生BFC

根元素或包含根元素的元素
浮动元素float＝left|right
绝对定位元素position＝absolute或fixed
display＝inline-block|flex|inline-flex|table-cell或table-caption
overflow＝hidden|auto或scroll（除了 visible 以外的值）

4、在布局中BFC的应用场景

（1）清除盒子垂直方向上外边距合并–盒子垂直方向的距离

因为属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
下面这个图，因为p1还有p2都在同一个div盒子里面，他俩的盒子垂直方向上的外边距就会合并。因此就发生了p1跟p2中间的间距只有10px。

<style>
    .par {
        background-color: red;
    }

    .p1 {
        height: 100px;
        width: 100px;
        background-color: green;
        margin: 10px;
    }
</style>
<div class="par">
      <p class="p1">qwe</p>
      <p class="p1">qwe</p>
</div>

在这里插入图片描述
但是为什么p1的上边的margin-top给了父盒子的margin-top，然后导致p1的顶部紧靠父盒子的顶部呢？

 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。这个时候给父盒子元素设置overflow:hidden就可以了。

在这里插入图片描述
这个时候两个子盒子仍然还是挨着的，此时可以分别给两个子盒子开启BFC，就可以解决这个问题。

.par {
        background-color: red;
        overflow: hidden;
    }

    .p1 {
        height: 100px;
        width: 100px;
        background-color: green;
        margin: 10px;
    }
</style>
<div class="par">
    <p class="p1">qwe</p>
</div>
<div class="par">
    <p class="p1">qwe</p>
</div>

在这里插入图片描述

（2）子元素浮动、父容器高度塌陷

浮动 元素会脱离普通文档流，由于容器内元素浮动后脱离了文档流，所以容器会发生高度塌陷问题。
但是如果开启容器的BFC，那么容器将会包裹着浮动元素，就不会发生高度塌陷的问题了。overflow:hidden

在这里插入图片描述
此时父盒子消失了。这就是高度塌陷。

（3）开启了BFC的元素不会被浮动的元素覆盖:overflow:hidden

因为浮动的元素脱离了文档流，元素脱离文档流之后，就会影响其他元素的布局，比如说是在他下面的元素会往上移动。
由于开启了BFC的元素不会被浮动的元素覆盖，所以可以给父元素开启BFC。overflow:hidden
注意：如果说想通过代码辅助理解BFC的话，可以参考这个博客：
[参考博客](https://blog.csdn.net/sinat_36422236/article/details/88763187?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2-88763187-blog-109789742.pc_relevant_multi_platform_whitelistv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2-88763187-blog-109789742.pc_relevant_multi_platform_whitelistv2&utm_relevant_index=3)