BFC

BFC是什么

BFC全称是Block Formatting Context，即块格式化上下文。块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

三种定位

1. 常规流

• 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
• 对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

2. 浮动(Floats)
3. 绝对定位(Absolute positioning)

BFC创建的7种方法

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；
  最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。

BFC的范围

一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

这段代码表示，#div_1创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也属于#div_1所创建的BFC。但由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。从另一方角度说明，一个元素不能同时存在于两个BFC中。

BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性

BFC的效果

1. BFC内部可以看作有一个常规流
2. BFC内部margin collapse
3. 元素的margin box的左边与容器的content box左边想接触
4. BFC是独立的容器，里面的子元素不会影响外面的元素，外面的元素也不会影响里面的元素
5. 计算BFC高度时，考虑BFC包含的所有元素，连浮动的子元素也包括，但不包括浮动的子元素中的子元素
6. 移动盒区域不添加到BFC上
   具体实例：https://juejin.im/post/59b73d5bf265da064618731d#heading-12

BFC的应用

• 兄弟元素之间划清界限：overflow:auto 或者 display：flow-root(兼容性差);

        *{
            padding: 0;
            margin: 0;
        }
        .slide-bar{
            width: 100px;
            min-height: 300px;
            border:5px solid red;
            float:left;
        }
        .main{
            border:10px solid green;
            min-height: 300px;
            overflow: auto;
        }

    

        
    
    
    

    
  

image.png

• 清除浮动

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            min-height: 10px;
            border:5px solid red;
            
        }
        .son{
            
            background-color:green;
            width: 300px;
            height: 100px;
            float: left;}
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    
    

        

    
    
    
  
    

image.png

• 竖直方向上margin合并现象

        *{
            padding: 0;
            margin: 0;
        }
        .demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
        .demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}


    

    

在这里插入图片描述

浏览器解析的时候会使外边距叠加在一起，这时候就是遇到了BFC的问题，那么就要通过触发BFC来解决这个问题。

        *{
            padding: 0;
            margin: 0;
        }
        .demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
        .demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}
        .box{position :absolute;}
    
    

    

    

在这里插入图片描述

• 高度塌陷

在这里插入图片描述

解决:给父盒子加上BFC

在这里插入图片描述

• 子盒子设置margin，父盒子掉落

html

    


css
.box{width: 300px;height: 300px;background-color: black;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

在这里插入图片描述

解决：

html

    


css
.box{width: 300px;height: 300px;background-color: black;overflow: hidden;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

参考链接：
https://juejin.im/post/59b73d5bf265da064618731d#heading-12
https://www.jianshu.com/p/33abfdd57fb8
https://www.jianshu.com/p/d94c6b679739
https://blog.csdn.net/return_js/article/details/81266131
https://blog.csdn.net/jiaojsun/article/details/76408215