前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)

BFC

1. BFC 是什么？

首先要介绍一下关于文档流相关的知识。

文档流分为三个部分：

• 普通流；
• 定位流；
• 浮动流；

这三种流在布局的时候会相互影响，进而产生一些问题。

这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。

BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BFC 指的就是一个被隔离的区间，是一个独立渲染的区域。BFC 中的子元素不会对外面的元素产生影响。

2. BFC 怎么触发？

BFC 的触发条件如下：

• body：BFC 元素；
• float：left | right；
• position：absolute | fixed 非 relative；
• display：inline-block | table-cell | table-caption | flex | grid；
• overflow：hidden | auto | scroll；不是 visible；

3. BFC 具体解决的问题

margin 边距合并问题

具体的代码如下：

<div class="box box1"></div>
<div class="box box2"></div>

<style>
    .box {
     
        width: 100px;
        height: 100px;
    }
    
    .box1 {
     
        margin-bottom