什么是BFC?

BFC是什么?

BFC 全称:Block Formatting Context, 名为 “块级格式化上下文”。

W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。

简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性

如何触发BFC?

这里简单列举几个触发BFC使用的CSS属性

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

BFC的规则

  • BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列
  • BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
  • 垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC的高度时,浮动元素也参与计算

BFC解决了什么问题

1.使用Float脱离文档流,高度塌陷

<style>
    .box {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    .container {
        background: #000;
    }
</style>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

效果如下:
使用Float脱离文档流,高度塌陷

可以看到上面效果给box设置完float结果脱离文档流,使container高度没有被撑开,从而背景颜色没有颜色出来,解决此问题可以给container触发BFC,上面我们所说到的触发BFC属性都可以设置。

修改代码

<style>
    .box {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    .container {
        background: #000;
        display: inline-block;
    }
</style>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

此时效果如下:

使用Float脱离文档流,高度塌陷

2.Margin边距重叠

<style>
    .box {
        margin: 10px;
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

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

效果如下:

Margin边距重叠

可以看到上面我们为两个盒子的margin外边距设置的是10px,可结果显示两个盒子之间只有10px的距离,这就导致了margin塌陷问题,这时margin边距的结果为最大值,而不是合,为了解决此问题可以使用BFC规则(为元素包裹一个盒子形成一个完全独立的空间,做到里面元素不受外面布局影响),或者简单粗暴方法一个设置margin,一个设置padding

修改代码

<style>
    .box {
        margin: 10px;
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

<div class="container">
    <div class="box"></div>
    <p><div class="box"></div></p>
</div>

效果如下:

Margin边距重叠

3.两栏布局

<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
</style>

<div style="float: left;">
    两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
</div>
<div style="width: 300px;">
    我是码云笔记,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到
</div>

效果如下:

两栏布局

可以看到上面元素,第二个div元素为300px宽度,但是被第一个div元素设置Float脱离文档流给覆盖上去了,解决此方法我们可以把第二个div元素设置为一个BFC

修改代码

<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
</style>

<div style="float: left;">
    两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
</div>
<div style="width: 300px;display:flex;">
    我是码云笔记,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到
</div>

效果如下:

两栏布局

结语

以上就是今天码云笔记为大家解答的什么是BFC,感谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎下方留言指正。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 什么是BFC?

发表评论

提供最优质的资源集合

立即查看 了解详情