CSS-02 BFC的理解

两个概念

感觉BFC挺重要的，于是最近查阅网上资料后小结一下，如果有不对的地方还望指正。

先理解两个概念：

BOX :盒子模型

　　Block-Leave Box ：块级元素

　　　　　　display属性为block, list-item, table的元素，会生成block-level box，并且参与 block fomatting context；

　　Inline-Leave Box : 行内元素

　　　　　　display 属性为 inline, inline-block, inline-table的元素，会生成inline-level box。并且参与 inline formatting context；

Formatting context ：

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。

　　CSS2.1 中只有BFC和IFC, CSS3中还增加了G（grid）FC和F(flex)FC。　

BFC的理解

1.BFC 定义

BFC:Block fomatting context = block-level box + Formatting Context

这是从MDN上摘下来的BFC定义：

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

BFC(Block formatting context)直译为"块级格式化上下文"。块级格式化上下文是CSS可视化渲染的一部分。它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。

2.BFC本质是发生了什么变化

当你给一个父元素增加BFC后，那么这个父元素就会形成一个"独立空间"，有了"边界效应"，就像给父元素加了一个透明的border一样，它的子元素就属于BFC区域内部，不会受到外部元素的影响。

BFC构建了独立文档流，这个文档流有自己的排列规则，如下所示，具有独立性，不受外界干扰。

3.块格式化上下文（BFC）有下面几个特点：

BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
HTML结构中，当构建BFC区域的元素，紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。
BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

第一点比较抽象，我们从第二点开始看：构建BFC区域的元素可以称为BFC容器，我习惯叫父元素。

对父元素本身的影响：BFC的区域不会和外部浮动盒子的外边距区域发生叠加，因此，

当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，换行等行为而不与浮动有重叠。

看这个例子：当aside浮动时，他会盖住main的一部分

    <style>

        .father {

            border: 1px solid red;

            width: 500px;

        }

        .aside {

            float: left;

            width: 100px;

            height: 150px;

            background: #ff6666;

        }

        .main {

            height: 200px;

            background: #ffcccc;

        }

    </style>

<body>

<div class="father">

    <div class="aside">aside</div>

    <div class="main">main</div>

</div>

</body>

这时候，给main一个overflow：hidden，让他增加BFC效果，这时候，浮动的aside就不会盖在他的上面，

因为第三点规定HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染，所以它靠着aside右边排列。

        .main {

            overflow: hidden;

            height: 200px;

            background: #ffcccc;

        }

如果我们再交换下aside和main标签的位置，结果就变成浮动的aside被挤下去，还是因为规定BFC的区域main不会和外部浮动盒子aside发生叠加，但main标签在前，它是先渲染的，于是他就把aside挤下去了。

<div class="father">

    <div class="main">main</div>

    <div class="aside">aside</div>

</div>

对父元素里面子元素的影响：第三点和第四点是针对设置了BFC的子元素的特性：

　　第三点：HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。

　　第四点：BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

解释：当父元素被添加BFC布局后，比如overflow：hidden，他要检测子元素是否超出边界，就会重新回流子元素的位置，把子元素的宽高计算在内，于是浮动的元素也能撑开父元素了，这也成了清除浮动影响的一个方法;

除了上面子元素还有补充两个小点注意：

　　　　①内部的元素会在垂直方向，一个接一个的放置

　　　　②子元素垂直方向上的距离由margin决定，同一个BFC的子元素会发生外边距塌陷

解释：如果子元素有margin-top，也不会和父元素发生外边距塌陷的问题，因为父元素是他所在的文档流的子元素，他们不是同一个BFC的子元素，只有同一个BFC的子元素会发生外边距塌陷的问题。

所以，不管是这个元素要清除浮动或是发生了外边距塌陷，只要给他父元素增加BFC布局就能解决这些问题。

4.怎样添加BFC布局呢

浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。

在实际中选择采用哪种方式构建BFC是要具体问题具体分析的，因为要考虑到选用的样式自身的作用和影响，比如float：left，和position：absolute都能构造BFC布局，根据需要选择合适的方式。

不过在各种构建BFC的方式中，普遍采用overflow来清除浮动。

补充：

上面将通过构建BFC布局，清除浮动，顺便讲下与chear:both清除浮动的区别：

　　chear:both清除浮动是直接告诉浏览器，设置clear:both的元素两侧不容许有浮动的元素，这时候，浏览器为了实现这一目标，就会把该元素放到写下一行，这样它们就不在一行了，也就实现了两侧没有浮动元素的要求

　　所以当父元素中有几个子元素浮动时，比如ul中的li元素浮动，可以给ul最后一个子元素后面插入一个元素，给这个元素一个chear：both，这时候，因为这个元素左侧不允许有浮动的元素，浏览器就被把这个元素放到下面

　　一行，于是父元素就被撑开了，我们再给这个子元素设置display：none，width/height都是0，那么就实现了清除li浮动的效果。这点和上面的BFC清除浮动不是一个原理

参考博客：https://www.cnblogs.com/lauzhishuai/p/10953608.html