BFC原理

最新推荐文章于 2020-10-10 17:53:14 发布

胡鹤婷

最新推荐文章于 2020-10-10 17:53:14 发布

阅读量610

点赞数

分类专栏： css

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BFC是什么？

在解释BFC元素之前，先看一下另外两个概念Box,Formatting Context的概念
Box：是CSS布局的对象和基本单位，一个页面是由很多 Box组成的。元素的类型和display属性决定了这个Box的类型。不同类型的Box,会参与不同的Formatting Context(决定如何渲染文档的容器)，因此Box内的元素会以不同方式进行渲染。
1.block-level box:display属性为block,list-item,table的元素会生成block-level box。并参与block fomatting context;
2.inline-level box:display属性为inline属性为inline,inline-block,inline-table属性，会生成inline-level box。并参与inline formatting context;
3.run-in box:表现行为如下：
1.如果run-in框包含一个块框，那么run-in框变为块框。
2.如果run-in框的后继兄弟为块框（非浮动，非绝对定位），那么run-in框变为该块框的第一个行内框。run-in不能直接插入本身的run-in的快中，也不能插入块中已有run-in的块中。
3.否则，run-in框变为块框

Formatting:
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。最常见的Formatting context有Block fomatting(简称BFC)和Inline formatting context(简称IFC)
CSS2.1中只有BFC和IFC，CSS3中还增加了GFC和FFC
更多有关Formatting的介绍可以看这篇文章css3中的BFC,IFC,GFC和FFC

BFC定义

BFC(Block formatting context)译为”块级格式化上下文”,它是一个独立渲染的区域，只有Block-level box参与，它规定了内部的Block-level Box该如何布局，并且与这个区域外部毫不相干，是一个隔离渲染的区域，容器里面的子元素不会在布局上影响到外面的元素

哪些元素会产生BFC元素：

根元素
float属性不为none的元素
position为absolute或者fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible

BFC与流体布局

BFC最重要的特性在于它可以实现更加健壮，更加智能的自适应布局
实例1：基本文字环绕效果

<style>
  .father{width: 400px;border:1px solid red}
    img{float:left}
</style>    
 <div class="father">
      <img src="./zhuxian.png" alt="">
      <p class="animal">小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，
          小猫，小猫，小猫，小猫，小猫，猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，小猫，</p>
  </div>

页面：
这里写图片描述

这个时候，.animal中的内容显然受到了设置float属性值的图片的影响而被环绕了。此时如果我们给.animal元素设置具有BFC特性的属性，如overflow:hidden;
w3s2
普通流体元素在设置了overflow:hidden后，会自动填满容器中除了浮动元素以外的声誉空间，形成自使用布局效果，而且这种自适应布局要比纯流体自适应布局更加智能。比如，我们可以自动填满剩余的空间。

和机遇纯流体特性实现的多栏自适应布局，基于BFC特性的自适应布局有如下优点：
1.自适应内容由于封闭而更加健壮，容错性更强。例如：内部设置clear:both不会发生与float元素相互干扰而导致错位，
2.自适应内容自动填满浮动以外的区域，无需关心浮动元素的宽度，可以整个网站大规模使用，可以使用通用的布局类名：

.left{float:left;}
.right{float:right}
.bfc{overflow:hidden}

只要遇到两栏布局就可以直接使用上面的结构类名完成基本布局。
而纯流体布局需要大小不确定的margin或者padding等值撑开合适的间距，无法CSS组件化。

BFC常见使用场景

1.清除浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }

    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

这里写图片描述
由BFC布局规则：计算BFC的高度时，浮动元素也参与计算
为了达到内部清除浮动，我们可以出阿发par生成BFC,那么par在计算高度时,par内部的浮动元素child也参与计算

.par{
   overflow:hidden;
}

代码：

.par{
  overflow:hidden;
}

效果如下：
这里写图片描述

2.防止垂直方向上的margin发生重叠
代码：

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

页面效果：
这里写图片描述
两个p之间的距离是100px,发生了margin重叠
由BFC布局规则：

Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠

所以，为了解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，垂直方向上就不会发生margin重叠了

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>