一篇文章带你搞定BFC~

一、什么是BFC

• 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。
• 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

二、BFC的特点

• 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何变化，都不会影响到外部。

三、怎样触发BFC

• overflow: hidden

• position: absolute

• position: fixed

• display: inline-block

• display: table-cell

• display: flex

四、BFC布局规则

• BFC 就是一个块级元素，块级元素会在垂直方向一个接一个的排列

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。同样外面的也不会影响里面的。

• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠

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

五、BFC解决了什么问题

• 问题：在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。

• 解决方法：给父元素设置overflow:hidden；的时候会产生BFC由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。

• 问题：属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

• 解决方法：根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。

六、结语

      非常感谢您能读完这篇文章，也欢迎评论补充哦，如果您感觉这篇文章对您有帮助的话，希望您能点个推荐和收藏哦，非常感谢！