关于 BFC 的布局应用：清除浮动、文字环绕

BFC（Block Formatting Context）块级格式化上下文

是一个独立的渲染区域，决定了其子元素将如何定位，以及和其他元素的关系和相互作用，BFC 只有 Block-level box 参与， 它规定了内部的 Block-level Box 的布局效果，并且与这个区域外部毫不相干，默认情况下只有根元素（即body）一个块级上下文。

创建依据：HTML 盒子(div) 什么情况下属于 BFC

1. 默认情况下：根元素
2. float 不为 none
3. overflow不为 visible
4. position 不为 static、relative
5. display 为 inline-block, table-cell, table-caption, flex, inline-flex 五个之一

BFC 布局应用和规则：

1. 自动换行

   内部的Box会在垂直方向，一个接一个地放置， flex, inline-flex 弹性盒模型不会自动换行。

2. margin 上下外边距折叠

   前提是在同一个BFC内，两个相邻 Box 的margin会发生重叠，当兄弟元素的外边距不一样时，将以最大的那个外边距为准，如果在不同的BFC容器内，就不会发生外边距折叠。

3. 设置和清除文字环绕，自适应两栏布局

   每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，除非在这个 BFC 里面创建了一个新的 BFC（unless the box establishes a new block formatting context）。 而在 BFC 和常规文件流中，文本的 line boxes （文本行） 会因为浮动元素的占据，而收缩空间，当排列到浮动元素没有的区域，就又会紧贴着容器边框。但是，p 标签的背景一直是紧贴着 BFC 容器边框。如果要 p 标签整个一起（包括背景）都不再处于浮动元素的下面，不再紧挨着容器块的左边缘，就需要将 p 标签创建成一个新的 BFC ，比如通过给 p 标签添加 overflow: hiddenl; 来创建一个新的 BFC ，从而解决文字环绕问题。

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6. 消除子元素浮动

   计算BFC的高度时，浮动元素也参与计算，因此可以通过overflow: hidden; 来创建 BFC 使其父容器包含浮动的子元素

应用1 清除内部浮动

            
                                    
    
            
     
       1
     
            
     
       1
     
        
    
        

外层的 div 不能设置高度否则不能消除越界

由于 item 设置了浮动，脱离文件流，而导致 container 没有将其包含，只显示出了黑色边框

清除浮动后，父容器自动包含子元素

应用2 设置和清除文字环绕

在某些网页中，图片和文字的不同排版，可以通过设置 BFC 来处理。

image-20190111165546079

            
                                    
    
            
     
      Floated div
     
            
     
Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.
         
    
    

设置文字环绕

消除文本环绕，做出自适应两栏布局