什么是BFC?BFC可以解决什么问题

1 篇文章 0 订阅

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

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

三、BFC是一个css渲染特殊的一部分,需要一定的条件才能触发

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 positionabsolutefixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 具有overflow 且值不是 visible 的块元素

四、BFC可以解决的问题

  • 垂直外边距重叠问题
  • 去除浮动
  • 自适用两列布局

1、解决外边距塌陷的问题

1)、父子元素的外边距塌陷问题

我们在一个元素内部子元素,设置了一个margin-top:20px; 结果父元素有一个具体顶部20px的距离,明显不符合我们的预期

* {
  margin: 0;
  padding: 0;
  }
.box {
  width: 400px;
  height: 400px;
  background-color: skyblue;
}

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


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

这样设置我们页面效果是这样的

box距离顶部有一定的距离

如果我们要解决父子元素边距塌陷问题,我们给box加上 overflow:hidden;属性

2、解决第二种兄弟元素之间外边距塌陷

两个兄弟元素设置margin:20px;按照我们想的应该两个元素相距40px才对是吧,但实际上两个元素相距20px

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

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

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

这时就会产生外边距塌陷的问题:

这时外边距会怎么计算呢?

  • 1.两个都是正数,取较大的值
  • 2.两个都是负数,取绝对值较大的值
  • 3.一正一负,取两个值得和

我们把修改下

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

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

.box{
    overflow:hidden;
}


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

 这样边距就是200px了

3、自适用两列布局

.box {
    width: 300px;
    height: 400px;
    background-color: skyblue;
}
.box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
} 
.box2 {
    height: 200px;
    background-color: blue;
}
    

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

我们可以看到,蓝色部分被遮挡住了,也不是自动适应剩下的布局

如果我们想实现,怎么写呢

给box2加一个overflow: hidden;在来看下效果

自动适应布局

这个其实利用的就是 bfc特性bfc区域不会与float-box区域重叠

BFC当然还有一些别的用处 比如利用overflow:hidden去除浮动等

  • 11
    点赞
  • 19
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

浪人巷子7

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值