面试题: BFC(Block Formatting Context）

 BFC (Block Formatting Context),是什么?

我们在页面布局的时候，经常出现以下情况：

• 这个元素高度怎么没了？
• 这两栏布局怎么没法自适应？
• 这两个元素的间距怎么有点奇怪的样子？
• ......

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

BFC 的中文意思是块级格式化上下文,是用于布局块级盒子的独立渲染区域，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。简单来说就是 BFC 就是 css 的一个布局概念，是一个独立的区域(容器) 

触发条件

满足下列条件之一就可以触发 BFC:

• HTML 根元素
• position 为 absolute 或 fixed
• float 属性不为 none（常用）
• overflow 不为 visible（常用）
• display 为 inline-block， table-cell， table-caption， flex（常用)

可以解决什么问题?

margin 重叠,清除浮动,自适应布局.

防止 margin 重叠（塌陷）

 应用场景

清除元素内部浮动
解决盒子margin合并问题（塌陷也可以解决）
实现元素宽度自适应多列布局
制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）
当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。