BFC块级格式化上下文

写于2017-08-29，但是发现比个人网站省力气得多，遂搬家至此；

学习BFC之前，务必要理解透彻什么是文档流，以及浮动和定位导致的脱离文档流；
文档流不难理解，今天的重点是bfc，不可乱了主次；

什么是BFC

BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关；
即里面想怎么样就怎么样不会影响此区域以外的任何元素。

BFC(创建)触发条件

   1.根元素 即html
   2.float属性不为none
   3.position为absolute或fixed
   4.display为inline-block, table-cell, table-caption, flex, inline-flex
   5.overflow不为visible

BFC约束规则(作用)

    1、内部的Box会在垂直方向，一个接一个地放置。
    2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,不同BFCmargin不会重叠
    3、每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使浮动也是如此。
    4、BFC的区域不会与float box重叠。
    5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    6、计算BFC的高度时，浮动元素也参与计算 

接着，我们现在用实例去验证一下；

BFC约束规则 1,2,3验证

image.png

稍微改变结构即验证 第三条末尾 浮动也是如此；

image.png

BFC约束规则456

    
        
        
        
    
    
        

            

                浮动div
            
            

                兄弟div
            
        
                    
    

image.png

overflow: hidden;
float: right;
display: inline-block;
position: absolute;
display: table-cell;
display: table-caption;
display: flex;
display: inline-flex;

在兄弟div上增加以上任意一个即可形成新的bfc；
下图 也是一种分栏自适应布局常用的手段；

image.png

此处需要注意的是，当上图绿色div宽度超过包裹容器的剩余宽度，会换行显示(目前我只测试了chrome，没装ie和其他)；
但是但是display：table-cell无论多宽都不会超过容器不会换行，是和浮动元素在同一行；
当把外层红色边框div 加上overflow:hidden变成bfc时，增加浮动元素高度；
该BFC的高度包含浮动元素的高度，即 计算BFC高度 浮动元素也参与计算；

image.png

不同BFC 垂直margin不会重叠

    
        
        
        
    
    
        

            

                div1
            
            

                

                    div2
                
            
            
        
                    
    

image.png

现在把div2的包裹容器d2div 加上可以触发bfc的样式(切记不要加多余任何样式,尤其是border)；

#d2div{
    overflow: hidden;
}

此时 红绿两个div已经处于不同的bfc中,所以margin不再重叠；

image.png

日后有新的补充···

版权声明：本文原创，转载请注明出处 https://www.jianshu.com/p/040546c79025