CSS第二弹——什么是BFC(块级格式化上下文)

最新推荐文章于 2024-02-05 16:43:26 发布

勤劳的多肉

最新推荐文章于 2024-02-05 16:43:26 发布

阅读量147

点赞数

分类专栏：前端知识——CSS

本文链接：https://blog.csdn.net/m0_46687501/article/details/118905621

版权

前端知识——CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS第二弹——什么是BFC(块级格式化上下文)

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

什么是BFC

BFC又称块级格式化上下文，在网页当中每一个盒子都有着相同的渲染规则，但是当我们为某个盒子触发BFC的时候，这个有特点的盒子就会遵循另一个规则，有人会说遵循另一个规则又会怎样，其实触发了BFC会解决很多问题，首先我们先研究一下怎样会触发BFC呢

怎样会触发BFC

触发BFC的方法有4种
1.position：absolute
2.display：inline-block
3.float：left/right
4.overflow：hidden
这是我所了解的，如果还有其他触发BFC的方法欢迎在评论区补充，知道了触发BFC的方法后，我们来了解一下触发BFC会解决哪些问题呢

触发BFC可以解决的问题

1.可以解决margin的塌陷，我们来看下面的例子

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .firstson,.secondson{
            width: 100px;
            height: 100px;
            background-color: blue; 
        }
        .firstson{
            margin-bottom: 30px;
        }
        .secondson{
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        <div class="firstson"></div>
        <div class="secondson"></div>
    </div>
</body>

在这里插入图片描述

我们给第一个div设置了下margin值是30px，给第二个div设置了上margin值是30px，但是我们发现当前两个div之间的空隙只有30px，上下两个div的margin竟然合并了！在实际开发中这种情况还是经常会遇到的，我们可以触发BFC来解决

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .firstson,.secondson{
            width: 100px;
            height: 100px;
            background-color: blue; 
        }
        .firstson{
            margin-bottom: 30px;
        }
        .secondson{
            margin-top: 30px;
        }
        .bfc{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <div class="firstson"></div>
        <div class="bfc">
            <div class="secondson"></div>
        </div>
    </div>
</body>

这里我采用的是 overflow: hidden，这样上下两个盒子之间的塌陷问题就解决了

2.可以清除浮动,第一弹中我们提到了清除浮动的办法之一就是触发父元素的BFC(可以看我上一节的笔记)，比如给父元素设置overflow：hidden/auto，display：inline-block等。

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

勤劳的多肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第二弹——什么是BFC(块级格式化上下文)

CSS第二弹——什么是BFC(块级格式化上下文)本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！什么是BFCBFC又称块级格式化上下文，在网页当中每一个盒子都有着相同的渲染规则，但是当我们为某个盒子触发BFC的时候，这个有特点的盒子就会遵循另一个规则，有人会说遵循另一个规则又会怎样，其实触发了BFC会解决很多问题，首先我们先研究一下怎样会触发BFC呢怎样会触发BFC触发BFC的方法有4种1.position：absolute2.display：
复制链接

扫一扫

专栏目录