css BFC的理解

css BFC的理解

先来介绍一下什么是文档流(常规流)

文档流指的是元素在布局排版过程中，元素会在浏览器中以自上而下的顺序依次排列的规则。display为block的会独占一行，可以设置宽高度和外边距等；inline元素会排成一行，直到空间不能满足大小会换行，不能设置宽高，宽高由子元素或内容撑开。inline-block则有block和inline-block的特点，表现为外面是inline盒子，里面是block盒子，可以遵循行内元素的特点排成一行，又可以设置宽高和边距。

我们在布局中，常常遇到使用overflow:hidden;来清除浮动,原理是因为触发了BFC情况。

一. 什么是BFC?
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二.BFC模式出现的情况?
1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值 比如(hidden，auto，scroll）；

三.BFC模式有什么特点?
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

四.BFC模式特点的案例
1.内部的Box会在垂直方向上一个接一个的放置。

html:

       <div class="container">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
                <div class="box4"></div>
            </div>

css:

div {
            height: 20px;
            
        }
        
        .container {
            position: absolute;  /* 绝对定位absolute创建一个BFC环境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left; //黄色的元素设置了浮动
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

此时可以看到BFC区域里面所有元素在垂直方向按照从上到下顺序依次排列，并且都是左对齐，box3黄色元素即使设置浮动了依然接着上一个元素垂直排列。

2.计算 BFC 的高度时，浮动元素也参与计算
没有对父元素固定高度的情况下，子元素浮动起来，会出现什么情况呢 看图

这里的父元素并没有被子元素撑开 子元素设置了浮动脱离了文档流没有检测到高度，那么我们如何利用BFC使浮动元素也算入父元素计算高度范围内呢。

css:

 .container {
            width: 400px;
            border: 2px red solid;
            overflow: hidden;/*我们为父元素创建了bfc*/
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: saddlebrown;
            float: left;
        }   

此时为父元素创建了bfc，子元素的高度被计算到了，父盒子也就相应的被撑开有了高度。

3.外边距折叠
BFC区域里的元素垂直方向上的距离由其中一个元素较大的margin值决定；
在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。

html:

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

css:

 div {
            height: 200px;
            width: 200px;
            
        } 
        .container {
        width: 500px;
        height: 500px;     
          background-color: #ccc;
       overflow: hidden;
            
        }
        
        .box1 {
          
            background-color: red;
            margin:10px 0px;
        }
        
        .box2 {
            
            background-color: green;
            margin:20px 0px;
        }

此时可以看到box1上边距正常存在，两个子盒子的垂直距离为20px而不是30px，因为垂直外边距会折叠，间距以较大的为准。
那怎么才能让两个子盒子不发生外边距重叠呢？
此时BFC的一个特性说明了如何解决。bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。那么我们让box1或box2再处于另一个BFC区域里就行了。

html:

 <div class="container">
            <div class="container2">
                    <div class="box1"></div>
            </div>
               
                <div class="box2"></div>      
            </div>

css:

    
        .container {
        width: 400px;
        height: 400px;
        background-color: slateblue;
        overflow: hidden;
        }       
        .box1 {
            height: 200px;
            width: 200px;
            background-color: red;
            margin-bottom:10px;
        }
        
        .box2 {
            height: 200px;
            width: 200px;
            background-color: green;
            margin-top:20px;
        }
        .container2{
            overflow: hidden;
        }

此时box1的父盒子创建了bfc 可以看到两个盒子的垂直距离是30px 也就解决了外边距重叠 可以得出结论：Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

4.浮动元素不会对bfc区域元素产生影响

html:

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

css:

  .container {
            width: 500px;
            height: 400px;
            background-color: slateblue;
           
        }

        .box1 {
            height: 200px;
            width: 200px;
            background-color: red;
           float: left;
           margin-right: 10px;
        }

        .box2 {
            height: 200px; /* 不设置宽 宽度自适应*/
            background-color: green;
            overflow: hidden;
        
        }

我们为box2盒子创建了一个bfc区域，根据bfc区域的元素独立于外面元素的特点，box2盒子并没有被设置了浮动的box1盒子覆盖。

这个特性同样可以用在常用的三栏布局上

html:

 <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

css:

    .container {
            width: 700px;
            height: 400px;
            background-color: slateblue;
           
        }

        .box1 {
            height: 200px;
            width: 200px;
            background-color: red;
           float: left;
        
        }

        .box2 {
            height: 200px; 
            background-color: green;
       width: 200px;
       float: right;
        
        }
        .box3{
            height: 200px;
            overflow: hidden;
            background-color: pink;
        }

这里可以看出box3因为创建了bfc 并没有受到两边浮动元素的影响
写到这里，我们又可以得出结论 :BFC的区域不会与float元素产生重叠

float设计之初被用来设计字体环绕效果 用来布局的话浮动的盒子会覆盖文档流盒子 但是文档流盒子里的内容则不会被覆盖 那么我们如何用bfc让包含文字的内容来阻止字体环绕呢

想必大家都知道了 给包含文字的元素创建一个bfc区域

这是我对关于css bfc的理解，参考https://www.cnblogs.com/chen-cong/p/7862832.html