一文秒懂！！！bfc是什么？bfc的作用？

目录

      一、什么是bfc？

二、为什么会有bfc？

三、bfc特性

四、如何创建bfc？

例如给父元素添加以下任意样式

五、bfc有什么作用？

六、案例：使用bfc解决外边距塌陷问题

相关文章：怎样解决外边距塌陷问题

---

一、什么是bfc？

 全称：block formatting context 。意思就是块级格式化上下文。可以把bfc看作一个容器，容器里面的元素不会影响到元素外面的元素。

二、为什么会有bfc？

从理论上来讲，被包含在父元素里面的元素是不会影响到父元素旁边的元素，但实际上并不是总是如此，那么有什么办法让里面的元素和外面的元素真正隔离？因此有了bfc

三、bfc特性

1. bfc是一个块级元素，块级元素在垂直方向上依次排列
2. bfc是一个独立的容器，内部元素不会影响容器外部的元素
3. 属于同一个bfc的两个盒子，外边距margin会发生重叠，并且取最大外边距

四、如何创建bfc？

1. 根元素：html
2. 定位元素：元素的position属性为absolute或fixed时，脱离文档流和文本流
3. 浮动元素：元素的float属性值不为none，脱离文档流，但不脱离文本流
4. visibility属性:元素的visibility属性不为visible时
5. 布局：布局为inline-block、flex、table-cell、grid时
6. overflow 值为：hidden、auto、scroll；

例如给父元素添加以下任意样式

• overflow：hidden
• display：flex
• display：inline-flex
• display：inline-block
• position：absolute
• position：fixed

五、bfc有什么作用？

1. 解决当父元素没有高度时，子元素浮动会使父元素高度塌陷的问题
2. 解决子级元素外边距会使父级元素塌陷的问题
3. 清除浮动

六、案例：使用bfc解决外边距塌陷问题

下面是一个父盒子嵌套子盒子的案例，想要的效果是想让子元素与父元素顶部有30px的距离，但当我们给子元素设置margin-top时出现了并不是我们想要的效果。

//css

*{
    margin: 0;
    padding: 0;
 }

.parent{
    width: 200px;
    height: 200px;
    background-color: #ccc;
}

.child{
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    margin-top: 30px;
}



//html

<div class="parent">
   <div class="child"></div>
</div>

这时出现子元素并没有和父元素分开，而是父元素和子元素一起向下移动了30px的距离，所以可以利用bfc的特性，给父元素添加overflow: hidden。效果如下

.parent{
   width: 200px;
   height: 200px;
   background-color: #ccc;
   overflow: hidden;
}

所以现在终于明白解决外边距塌陷时，为什么要给父元素添加overflow：hidden属性了，原来是bfc的作用。

相关文章：怎样解决外边距塌陷问题

什么是外边距塌陷？怎样解决塌陷问题？秒懂！