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验证

<html>
    <head>
        <meta charset="UTF-8">
        <title>bfc</title>
        <style>
            body{
                border: 2px solid green;
            }
            div{
                width: 100px;
                height: 100px;
                background: red;
                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>        
    </body>
</html>

image.png

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

image.png

BFC约束规则456

<html>
    <head>
        <meta charset="UTF-8">
        <title>bfc</title>
        <style>
            body{
                border: 2px solid green;
            }
            #div{
                width: 400px;
                height: 400px;
                border: 1px solid red;
            }
            #d1{
                width: 100px;
                height: 50px;
                background: red;
                float: left;
            }
            #d2{
                width: 250px;
                height: 100px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="div">
            <div id="d1">
                浮动div
            </div>
            <div id="d2">
                兄弟div
            </div>
        </div>
                    
    </body>
</html>

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不会重叠

<html>
    <head>
        <meta charset="UTF-8">
        <title>bfc</title>
        <style>
            body{
                border: 2px solid green;
            }
            #div{
                width: 400px;
                /*height: 400px;*/
                overflow: hidden;
                border: 1px solid red;
            }
            #d1{
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 20px;
            }
            #d2{
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
            }
            #d2div{
                
            }
        </style>
    </head>
    <body>
        <div id="div">
            <div id="d1">
                div1
            </div>
            <div id="d2div">
                <div id="d2">
                    div2
                </div>
            </div>            
        </div>
                    
    </body>
</html>

image.png

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

#d2div{
    overflow: hidden;
}

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

image.png

日后有新的补充···

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

最后编辑于：2018.06.15 17:33:21