学习BFC格式化上下文笔记

BFC格式化上下文

块级格式化上下文（ Block Fromatting Context ）是按照块级盒子布局的。

BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks , table-cells , 和 table-captions ），以及 overflow 值不为 “visiable” 的块级盒子，都会为他们的内容创建新的 BFC （块级格式上下文）。

即满足以下其中任一或多个条件：

1、 float 的值不是 none 。

2、 position 的值不是 static 或者 relative 。

3、 display 的值是 inline-block 、 table-cell 、 flex 、 table-caption 或者 inline-flex 。

4、 overflow 的值不是 visible 。

作用：

• 内部的 Box 会在垂直方向上一个接一个的放置
• 垂直方向上的距离由 margin 决定。（完整的说法是：属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，与方向无关。）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明
  BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界）
• BFC 的区域不会与 float 的元素区域重叠，计算 BFC 的高度时，浮动子元素也参与计算
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

实例1： BFC 垂直方向边距重叠

<section class="box" id="sec">
        <style media="screen">
            #sec {
                background: #f00;
            }
            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow
            }
        </style>
        <article class="child"></article>
    </section>

<section class="box" id="sec">
        <style media="screen">
            #sec {
                background: #f00;
                overflow: hidden;
            }
            
            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow
            }
        </style>
        <article class="child"></article>
    </section>

实例2： BFC 不与 float 重叠

<section id="layout">
        <style media="screen">
            #layout {
                background: red;
            }
            
            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            
            #layout .right {
                height: 110px;
                background: #ccc;
                /* overflow: auto; */
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

<section id="layout">
        <style media="screen">
            #layout {
                background: red;
            }
            
            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            
            #layout .right {
                height: 110px;
                background: #ccc;
                /* 添加下面属性 */
                overflow: auto;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

实例3： BFC 子元素即使是 float 也会参与计算

<section id="float">
        <style media="screen">
            #float {
                background: red;
                /* 添加下面属性 */
                /* overflow: auto; */
            }
            
            #float .float {
                float: left;
                font-size: 30px;
                background-color: yellow;
            }
        </style>
        <div class="float">我是浮动元素</div>
    </section>

<section id="float">
        <style media="screen">
            #float {
                background: red;
                /* 添加下面属性 */
                overflow: auto;
            }
            
            #float .float {
                float: left;
                font-size: 30px;
                background-color: yellow;
            }
        </style>
        <div class="float">我是浮动元素</div>
    </section>