到底什么是BFC?

·  阅读 37

1、规范解释:块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

2、通俗理解:BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分,需要一定的条件才能触发: (1) 给元素添加浮动,浮动元素就具有BFC特性---- float: left/right;

(2) 给元素添加overflow属性---- overflow: hidden,auto,scroll(除了visible);

(3) 给元素添加display属性---- display: inline-block, flex, inline-flex, table-cell,table-caption;

(4) 给元素添加定位---- position: absolute,fixed

4、bfc特性 (1)内部的Box会在垂直方向,从顶部开始一个接一个地放置 (2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加,与方向无关 (3)每个元素的margin box的左边,与包含块border box的左边相接触,即使在浮动元素中也是这样 (4)BFC的区域不会与float box叠加,利用此特性可以实现两列布局,左边固定宽度,右边自适应 (5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,里面的子元素也不会影响到外面的元素 (6)计算BFC的高度时,浮动元素也会参与计算

5、bfc可以解决的问题: (1) 外边距塌陷的问题: 首先理解何为外边距塌陷? 第一种是父子元素之间的外边距塌陷 第二种是兄弟元素之间的外边距重叠 如果需要详细了解外边距塌陷,请参考以下链接:blog.csdn.net/qq_41893334…

  • 解决第一种父子元素外边距塌陷的方法是
  margin: 0;
  padding: 0;
  }
.box {
  width: 400px;
  height: 400px;
  background-color: skyblue;
  /* 给.box上触发bfc规范--如使用overflow:hidden */
  overflow: hidden;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 30px;
}


<div class="box">
  <div class="box1"></div>
 </div>

复制代码

这样父元素就是一个独立的盒子,不会受到.box1的margin-top的影响

  • 解决第二种兄弟元素之间外边距塌陷的方法是
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 30px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 10px; 
}

<div class="box1"></div>
<div class="box2"></div>
复制代码

而解决这种外边距重叠的方法就是利用bfc在box2的外边再包装一层box,此box就具有bfc特性,把就不会受到外部margin值的影响

.box-newBFC {
  overflow: hidden;
}

<!-- .box1 和 .box2 的样式与上一样 -->

<div class="box1"></div>
<div class="box-newBFC">
  <div class="box2"></div>
</div>
复制代码

OK,这里讲的bfc解决外边距塌陷的问题解决。

(2)解决float产生浮动的问题,我们一般会清除浮动,清除浮动有很多种方法,这里我就不一一列举了,而使用over-flow:hidden的方法就是bfc解决浮动的方法。

3.官方一点的写法

.clearfix{
    content:"";
    dispaly:table;
    clear:both;
}

复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改