BFC--CSS

1.BFC既“块级格式化上下文”，是一块独立的布局环境，保护内部元素不受外部影响，也不会影响外部，是CSS的一种布局方式。

2.有什么特性？

　　（1）BFC内部的盒子会在垂直方向上一个接一个的放置；

　　（2）垂直方向上的距离由margin决定（常规情况大小选大）；

　　（3）BFC的区域不会与浮动的元素区域重叠；

　　（4）计算BFC高度时，浮动元素也参与计算（如4（3），父元素可被浮动的子元素撑开）；

　　（5）BFC就是页面上的一个独立容器，容器里的子元素不会影响到外部元素。

3.形成条件

　　overflow:auto/hidden(除visible之外);

　　position:absolute/fixed;

　　float:left/right...(除none之外);

　　display:inline-block/flex/table-cell/table-caption;

4.可以用来解决什么问题？

　　（1）BFC用来解决边距重叠问题（非BFC情况下重合margin为值大的margin）。

　　　　两盒子是父子关系：父元素加overflow:hidden;

　　　　两盒子是兄弟关系：两盒子之间添加空元素或者伪类元素，再设置overflow:hidden。

　　（2）用来自适应布局。

　　　　可实现左边定宽右边自适应的两栏布局（或三栏布局），只需给左边left浮动，给右边添加overflow:hidden;使右边变成BFC，消除外部（即左边的浮动）对它的影响。

　　（3）可以清除浮动。

　　　　父元素未设置高度，而子元素浮动之后让父元素不能感知子元素高度而造成高度塌陷，这时候就可以给父元素设置overflow:hidden/auto;来消除外部（子元素浮动）对它的影响。

——内容收集整理于网络