前端BFC布局学习

BFC，全称为(Block formatting context)。按照个人理解是咱们在某一条件下会触发BFC布局，会产生必定的效果。

Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其余元素的关系和相互做用。

其中块级元素能够理解为父级元素，内容便是子元素，子元素也为块元素，其余元素指的是与内容同级别的兄弟元素，相互做用指的是BFC里的元素与外面的元素不会发生影响。

而触发BFC的条件是：

一、float的值不为none
二、overflow的值不为visible
三、display的值为table-cell、table-caption和inline-block之一
四、position的值不为static或者releative中任何一个

普通文档流的布局规则(通常像我这种新手没有布局意识的，就应该是普通文档流布局了。。。)

一、浮动的元素是不会被父级计算高度
二、非浮动元素会覆盖浮动元素的位置
三、margin会传递给父级
四、两个相邻的元素上下margin会重叠

BFC的布局规则

一、浮动的元素会被父级计算高度(父级触发了BFC)
二、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
三、margin不会传递给父级（父级触发了BFC）
四、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，而后让他的父级触发了BFC）

实例：

<!--html代码
BFC知足条件：display:inline-block;
因此会遵循BFC的布局规则，使得其浮动元素会被父级计算高度，从而也就避免了高度塌陷。
-->
<div style="border: 1px solid #f00; display: inline-block;">
    <div style="width: 100px; height: 100px; background: green; float: left;"></div>
</div>
 <!--
BFC知足条件：overflow:hidden；兄弟元素之间不会相互覆盖
-->
<div style="border: 1px solid #f00; margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; float: left;">hello1</div>
    <div style="width: 100px; height: 100px; background: red; overflow: hidden;">helloagain</div>
</div>
 <!--
    BFC知足条件：overflow:hidden；使得父级元素与子集元素margin不会重叠
-->
<div style="background: blue; margin-top: 100px; overflow: hidden;">
    <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hello1</div>
    <div style="width: 100px; height: 100px; background: red;">helloagain</div>
</div>

<!--
    BFC知足条件：overflow:hidden；使得父级元素与子集元素margin不会重叠，以及同级元素的margin不会重叠
-->
<div style="margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hello1</div>
    <div style="overflow: hidden;">
        <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">helloagain</div>
    </div>
</div>