面试必备知识BFC文章目录面试必备知识BFC前言一、BFC二是什么，BFC的特点三，BFC配置规则四，BFC五发生的因素，配置中BFC的应用场景总结
前言本文总结了面试中常见的面试问题BFC
首先，理解BFC 1是什么、BFC 1是什么以及作为BFC的块形成上下文是W3C CSS2.1规范的概念。
2、BFC是指在浏览器中创建独立的渲染区域，并有一组渲染规则，确定其子元素的放置方式，以及它们与其他元素的相互关系和作用。
二、BFC特点1、具有BFC特性的因素可视为隔离的独立容器，容器中的因素不影响布局外的因素，且BFC具有普通容器所不具备的一些特性。 通俗地说，BFC可以看成是一个封闭的大箱子。 箱子内部的要素无论怎样越过河流倒在海里，都不会影响外部。
三、BFC布局规则内部的Box在垂直方向上一个接一个放置。
盒的垂直距离由margin决定。 属于同一BFC的两个相邻Box的margin重叠
每个元素的边界框左侧与包含块边框的左侧相邻。 对于从左到右的格式，否则相反。 即使有浮动也是这样。
BFC的区域与浮动盒不重叠，与浮动要素紧密接触。
BFC是页面上的独立容器，容器中的子元素不影响外部元素。 反之亦然。
计算BFC的高度时，浮动元素也参与计算
四.哪些元素生成BFC 1、根元素
2、浮点属性不是none
3、位置为排除或固定
4、显示为inline-block、table-cell、table-caption、flex、inline-flex
5、溢出不是可视的
五、布局中BFC的应用场景(1)框垂直方向的外边合并——框去除与垂直方向的距离由margin决定。 属于同一BFC的两个相邻框的垂直边距重叠。解决方法：
根据属于同一BFC的两个相邻盒子的垂直margin重叠的性质，一个盒子可以包含另一个盒子的父元素，启动其BFC功能。 (例如，添加overflow :隐藏； )这样，垂直方向的两个箱子不在同一个BFC中，所以也不会发生垂直外距离合并的问题。
)如果子元素设置为浮动元素，则会出现父元素高度崩溃的问题。解决方法：
在父元素中设置Overflow :隐藏； 中发生BFC
在计算BFC的高度时，当然也检测浮动子框的高度。 所以，在子箱有高度但浮动的情况下，通过引出母箱的BFC功能，产生消除浮动的效果。
总结BFC知识也是学习前端的必要知识，通过实际测试可以巩固和加深记忆。