BFC的例子来看，首先，BFC的英文全称是BlockFormatContext，即块级格式化上下文。BFC的特点首先，我们都知道BFC的特点：内部元素会按垂直方向放置，从上往下依次排列。Box的垂直距离由margin决定，属于同一个BFC的两个相邻Boxes会出现margin。重叠。每个元素的边距框的左侧接触容器边框框的左侧（对于从左到右的格式，否则）。即使在有浮动的情况下也是如此；BFC的区域不与浮动框重叠。BFC是页面的一个独立容器，容器里面的元素不会影响外面的元素，反之亦然。BFC计算高度时，浮动元素也会参与计算。BFC的创建方法如下。创建BFC的方法大家都很熟悉了。-flex,flow-root最后一个是创建BFC属性position是absolute,fixedInstanceInstance1从instance1可以看到feature1，内部元素会从上往下一个接一个的放，属于同样的BFC两个相邻的边距重叠。如何解决重叠边距的问题？此时我们需要在元素上放一个父元素，把父元素变成一个BFC。示例这将解决重叠边距的问题。示例2从示例2可以看出，元素的外边距会触及包含块容器的外边框，即元素的左侧触及容器的左侧，并与浮动元素重叠.右边元素触发BFC时，不会和左边元素重叠。参见示例3。当两个子元素都浮动时，父元素的高度将消失。第六个特点，在计算BFC的高度时，float元素也会参与计算，这时候我们触发了父元素的BFC。这时实例发现高度会再次被拉伸，所以BFC的高度计算的浮动元素也会参与计算
