块格式化上下文(BFC)

基础学习

摘自MDN

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
[display]值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

总结

什么是块级上下文?

布局过程中生成的块级盒子。

块级上下文是做什么的?

块格式化上下文包含创建它的元素内部的所有内容,意思是一个容器如果是块级上下文的话，这个容器会包含它自身和内部所有的元素。

块级上下文主要有什么用?

可以清除浮动。

如何触发BFC块级上下文?

使用上面基础原理部分的方法。

示例1如下:无BFC无浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块格式化上下文</title>
        <style>
            .wrapper {
                padding: 1em; /*默认1em == 16px*/
                background-color: #DDDDDD;
                /*float: left;*/
                /*position: absolute;*/
                /*display: inline-block;*/
                /*display: table-cell;*/
                /*overflow: hidden;*/
            }
            .a {
                width: 10em;
                height: 10em;
                background-color: yellow;
                /*float: left;*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="a"></div>
        </div>
    </body>
</html>

起始状态

示例2如下:有浮动，但父级不设置BFC

            .a {
                width: 10em;
                height: 10em;
                background-color: yellow;
                float: left;
            }

浮动

可见子元素浮动之后没有设置高度的父级会塌陷。
然后如何解决呢?随便让父级触发一个BFC不就好了，就可以让父级利用块级上下文包含内部元素的所有内容，父级就可以撑开了。

            .wrapper {
                padding: 1em; /*默认1em == 16px*/
                background-color: #DDDDDD;
                float: left;
                /*position: absolute;*/
                /*display: inline-block;*/
                /*display: table-cell;*/
                /*overflow: hidden;*/
            }

父级设置BFC

由此发现父级触发任意一个BFC都可以包含内部的所有子元素。可以利用此效果清除浮动。

另外可以发现父级浮动后会自动变成块布局。

由于float意味着使用块布局

MDN说float之后，元素的display会变成block

            .wrapper {
                padding: 1em; /*默认1em == 16px*/
                background-color: #DDDDDD;
                float: left;
                /*position: absolute;*/
                /*display: inline-block;*/
                /*display: table-cell;*/
                /*overflow: hidden;*/
            }
        <span class="wrapper">
            <div class="a"></div>
        </span>

3.JPG

4.JPG

发现span元素在float之后变成了块元素。

最后编辑于：2018.11.10 01:17:37