BFC原理

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值