BFC是什么？有什么用？怎么用？

目录

什么是BFC？

BFC的内部规则是什么？

如何触发BFC机制呢？

BFC能解决什么问题？

1.他可以阻止元素被浮动的元素覆盖。

2.他可以解决父元素没有高度时，子元素浮动产生的父元素塌陷问题。

3.可以解决外边距margin重叠的问题

下面，来讲几个常见的问题以及问题的多种解决方式。

1.父级外边距折叠塌陷问题

2.margin 纵向重叠及合并解决

3.清除浮动带来的父元素塌陷

---

什么是BFC？

BFC的全称是block-formatting-context块级格式化上下文，他是一个独立的渲染区域，我们可以把他理解成一个封闭的容器，内部的容器不管怎么变化都不会影响到外部，容器内的样式布局也不会收到外界的影响。

BFC的内部规则是什么？

1.BFC他就是一个块级元素，从垂直方向上一个一个的依次排列。

2.BFC就是一个隔离的独立容器，内部的标签不会影响到外部标签。

3.BFC的所占区域不会与浮动的容器相重叠。

4.属于同一个BFC的相邻两个元素的margin会重叠，垂直方向上的margin数值取较大的那个。

5.计算BFC的高度时，浮动的元素也会计算进去。

如何触发BFC机制呢？

有以下几种常用方式：

1、给元素设置浮动 float: left | right

2、给元素设置脱离文档流的定位 position: absolute | fixed

3、给元素设置内容溢出 overflow: hidden | scroll |auto

4、给元素设置 display: flex | inline-block | table-cell

BFC能解决什么问题？

1.他可以阻止元素被浮动的元素覆盖。

比如我们一个两栏布局，左侧一个div盒子宽度固定，给他增加了左浮动之后，他就脱离了文档流，而右侧的div盒子是自适应的，这时他就会默认到最左边，这个盒子就被浮动的盒子覆盖起来了，此时我们就可以通过把右侧盒子设置为BFC，比如给右侧的盒子添加display：flex属性，解决这个被覆盖的问题。

2.他可以解决父元素没有高度时，子元素浮动产生的父元素塌陷问题。

比如我们给一个父盒子中的两个子盒子都加了浮动，这时给父盒子增加背景色，会发现没有效果，因为父盒子没有高度的话，子盒子浮动后就产生了父元素塌陷。这时我们可以增加一个触发BFC的属性，因为成为BFC后，它有一个规则是浮动元素也会把高度计算进去，这时候父元素的高度就被撑开了，也就产生了清除浮动的效果，解决了塌陷问题。

3.可以解决外边距margin重叠的问题

比如一个容器里有两个div，一个div的下边距的margin设置的是10px，一个div的上边距设置的是20px，那这两个盒子之间的距离是20px，而不是30px，这就是margin塌陷问题。这个时候margin应为两个div之间较大的那个margin值，而不是两者相加，如果就想让他们之间的间距是30px，就需要触发一个div的BFC，它的内部就会遵循BFC规则，解决办法是为元素包裹一个盒子，形成一个完全独立的空间，做到里面的元素，不被外面的元素影响。

下面，来讲几个常见的问题以及问题的多种解决方式。

1.父级外边距折叠塌陷问题

解决方法1：给父元素额外加1px的透明边框

解决方法2：给父元素额外加1px的内边距

解决方法3：把子元素的外边距改为给父元素内边距

解决方法4：给父元素设置overflow：hidden，触发BFC，父元素变成独立空间

解决方案5：把子元素变为行内块元素，display：inline-block

解决方案6：给父元素加浮动、固定定位、绝对定位，触发BFC解决塌陷问题（relative相对定位也会塌陷）

2.margin 纵向重叠及合并解决

解决方案1：直接给其中一个盒子的外边距设置为两者之和

解决方案2：分别给两个盒子套一个父元素，为父元素设置overflow：hidden，触发BFC

3.清除浮动带来的父元素塌陷

当设置子元素为浮动时，子元素脱标不占有原位置，父元素会塌陷，不再具有原来的宽高。

解决方案1：父元素宽高固定，这样就不会受到子元素脱标的影响

解决方案2：添加新元素，在父盒子内部再加一个空div，设置属性清除浮动clear：both

解决方案3：添加伪元素，如

.father::after{
    content: "";   /*内容为空*/
    display:block; /*::after默认添加行内元素，需设置为块元素*/
    clear: both;   /*清除浮动*/
}

解决方案4：给父元素添加overflow：hidden，触发父元素BFC