BFC - Block Formatting Contexts (块级格式化上下文)

Demo 1: 问parent的高度？（高度等于100px而不包含margin100px）

<div id='parent'>
    <div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
</div>

Demo 2: 问child1和child2的间距？（间距取两个兄弟dom之前的最大值，也就是200px）

<div id='parent'>
    <div id='child1' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
    <div id='child2' style="width: 100px; height: 100px; background: lightblue; margin: 200px;"></div>
</div>

Demo 3： 文本在float流的时候流淌

        <section>
            <div style="float: left; width: 100px; height: 100px; background: pink;"></div>

            <div style="fwidth: 200px; height: 200px; background: gray;" style="overflow:auto">
                fdajlf jals fjlkasj flasj lfkjas lkj laksfj las 
                fas jflkaj slfj alsjf lasjfl ajslfj lasf 
                f aslj asl jflasj flkasjfl kjaslf jaslj flas 
                fal sjflaskj flasj flkasj lfjaslk jflasjfla js
                f laskjflaskjflkajslfk jaslkfj asljflk as
            </div>
        </section>

对应效果：

Demo 4: 问parent的高度？（高度等于0，浮动元素不参与高度计算）

<div id='parent'>
    <div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px; float:left; "></div>
</div>

一. BFC 是什么？

有了上面的基础后，可以正式介绍 BFC 了。从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

二.BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4.BFC的区域不会与float box重叠。(正常float是不参与高度计算的)

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时，浮动元素也参与计算

三.BFC触发属性

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

Demo 5: 问parent的高度？（高度等于200px,包含margin100px）

<div id='parent' style='overflow:hidden;'>
    <div id='child' style=" width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
</div>

Demo 6: 问child1和child2的间距？（创建一个BFC容器包裹受影响的元素，间距取两个兄弟dom之和，也就是200px）

<div id='parent'>
            <div style='overflow:hidden;'>
                <div id='child1' style="width: 100px; height: 100px; background: lightblue; margin: 100px;"></div>
            </div>
            <div id='child2' style="width: 100px; height: 100px; background: lightblue; margin: 100px; "></div>
        </div>

Demo 7：文本在float流的时候依旧保持左右布局，将流淌文本parent添加overflow:auto，使其成为BFC布局

        <section>
            <div style="float: left; width: 100px; height: 100px; background: pink;"></div>

            <div style="fwidth: 200px; height: 200px; background: gray; overflow:auto; " style="overflow:auto">
                fdajlf jals fjlkasj flasj lfkjas lkj laksfj las 
                fas jflkaj slfj alsjf lasjfl ajslfj lasf 
                f aslj asl jflasj flkasjfl kjaslf jaslj flas 
                fal sjflaskj flasj flkasj lfjaslk jflasjfla js
                f laskjflaskjflkajslfk jaslkfj asljflk as
            </div>
        </section>

Demo 8: 问parent的高度？（用float属性将parent转化成BFC容器，高度等于300，浮动元素将参与高度计算）

<div id='parent' style="float: left;">
    <div id='child' style="width: 100px; height: 100px; background: lightblue; margin: 100px; float:left; "></div>
</div>