面试官: 谈谈你对BFC的理解以及外边距合并的问题

爱被打了一巴掌 2023-10-12 10:39 7阅读 0赞

**目录**

一、BFC的定义

二、触发BFC的条件

三、外边距合并问题

四、BFC的应用场景

1.避免外边距重叠

2.清除浮动

3.实现两栏布局

4.实现三栏布局

--------------------

## 一、BFC的定义 ##

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,

1.内部的盒子会在垂直方向上一个接一个的放置  
2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。  
3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此  
4.BFC的区域不会与float的元素区域重叠  
5.计算BFC的高度时，浮动子元素也参与计算  
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

`BFC`目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

> 在页面布局阶段，往往会因为BFC问题导致 页面布局发生错乱，如外边距合并问题，元素高度丢失，两栏布局没有实现自适应。

## 二、触发BFC的条件 ##

1.根元素，即HTML元素  
2.浮动元素：float值为left、right  
3.overflow值不为 visible，为 auto、scroll、hidden  
4.display的值为除了none以外的全部值, inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid  
5.position的值为absolute或fixed

## 三、外边距合并问题 ##

**1.兄弟级外边距合并**  
合并出现原因:同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并  
 **合并解决方案:**  
1.只给其中一个兄弟元素设置外边距  
2.给下边外边距开启BFC  
1.display:inline-blick/flex  
2.position:absolute/fixed  
3.float:left  
3.给上边兄弟元素设置一个父元素 给父元素开启BFC  
overflow hidden/auto  
 **2.父子级外边距合并**  
合并出现原因:同时给父子元素设置同一方向的一个外边距  
**合并解决方案:**  
1.给父元素设置padding属性  
2.给父元素设置border边框

## 四、BFC的应用场景 ##

#### **1.避免外边距重叠** ####

当兄弟盒子设置 同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并

![f16fa8c3994b4df0bed84a63bce140d8.png][]

出现了外边距重叠的问题，原本body 的高应该为 230(第一个盒子的高度100+第一个盒子的margin20+第二个盒子的高度100+第二个盒子的margin10),此时要解决这类问题，就要打开BFC

当给第二个盒子div打开BFC时，

div:last-child {
                    width: 100px;
                    height: 100px;
                    background: green;
                    margin-top: 20px;
                    display: inline-block;
                    /* position: absolute; */
                    /* float: left; */
                }

会出现下面的情况，使用这三种方法打开BFC，**会增加新的样式和边框**，此时body的高度为234px,不推荐使用

![08e7d5ea2b0145f6bf3ae781e85c5574.png][]

最佳方法:当我们**给第一个盒子一个父盒子**，并触发父盒子生成一个BFC,那么两个div就不属于同一个BFC,则不会出现外边距重叠问题。

， ![f04b1a4eff934530bf2b5bb7ae4bccdb.png][]

#### 2.清除浮动 ####

效果如下，在父元素parent计算高度时，并没有计算子元素child的高度。

![a0c0096e6ca548b6a4243dc957c6d056.png][] 当我们给父元素生成BFC后，父元素在计算高度时就会将浮动子元素child的高度也计算到其中

.parent {
                    border: 10px solid red;
                    /* 开启bfc overflow hidden auto */
                    overflow: hidden;
                }

页面达到的效果如下，正常显示![89107eaea62c4a1f997ff9d6a1b1491f.png][]

但我们使用其他方法生成BFC时，样式会发生变化，不符合要求,效果如下

![e294b90f708d4621ad715e5649e572b8.png][]

#### 3.实现两栏布局 ####

左侧设置宽度，右边自适应，右边开启BFC

实现了两栏布局且右边是自适应

![023074239fe046f9858f1111019cab2a.png][]

#### 4.实现三栏布局 ####

思路:左右两边固定宽度，给左盒子float:left;给右盒子float:right，给中间盒子开启BFC,实现左右固定宽度，中间自适应的效果

![f9298dd848dd42a1a6fbc17e7d1f0dc7.png][]

[f16fa8c3994b4df0bed84a63bce140d8.png]: https://img-blog.csdnimg.cn/f16fa8c3994b4df0bed84a63bce140d8.png
[08e7d5ea2b0145f6bf3ae781e85c5574.png]: https://img-blog.csdnimg.cn/08e7d5ea2b0145f6bf3ae781e85c5574.png
[f04b1a4eff934530bf2b5bb7ae4bccdb.png]: https://img-blog.csdnimg.cn/f04b1a4eff934530bf2b5bb7ae4bccdb.png
[a0c0096e6ca548b6a4243dc957c6d056.png]: https://img-blog.csdnimg.cn/a0c0096e6ca548b6a4243dc957c6d056.png
[89107eaea62c4a1f997ff9d6a1b1491f.png]: https://img-blog.csdnimg.cn/89107eaea62c4a1f997ff9d6a1b1491f.png
[e294b90f708d4621ad715e5649e572b8.png]: https://img-blog.csdnimg.cn/e294b90f708d4621ad715e5649e572b8.png
[023074239fe046f9858f1111019cab2a.png]: https://img-blog.csdnimg.cn/023074239fe046f9858f1111019cab2a.png
[f9298dd848dd42a1a6fbc17e7d1f0dc7.png]: https://img-blog.csdnimg.cn/f9298dd848dd42a1a6fbc17e7d1f0dc7.png