什么是BFC

最新推荐文章于 2025-04-10 09:40:36 发布

Silence_555

最新推荐文章于 2025-04-10 09:40:36 发布

阅读量272

点赞数

分类专栏： CSS 文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/Silence_555/article/details/113585078

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

什么是BFC

什么是BFC（Block Formatting Context ）

BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。
可以理解为BFC是一个块独立的作用域，它有些自己的特性。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

BFC的约束规则

1.内部的Box会在垂直方向上一个接一个的放置
2.同一个BFC内不同的盒子的margin值会重叠，取margin值大的那个
3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
4.BFC的区域不会与float的元素区域重叠,BFC外的元素浮动，BFC元素不会覆盖
5.计算父元素高度时，浮动子元素高度也会计算在内
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

如何产生BFC

满足下列条件之一就可以触发BFC

1.float 的值不是none
2.position 的值不是static或者relative。
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow 的值不是 visible

BFC的作用

1.解决margin塌陷问题
属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。
在同一个BFC中：
在这里插入图片描述
成为两个BFC，给其中一个盒子外面再包裹一层，并加上overflow: hidden;

 <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
        }
        .box {
            overflow: hidden;
        }
        .yellow {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="box">
        <div class="yellow"></div>
    </div>
</body>

2.解决父元素高度塌陷问题

当子元素设置为浮动，父元素没有设置高度时，父元素无法撑开子元素的高度
在这里插入图片描述
给父元素设置overflow: hidden;，触发BFC，就可以撑开高度

<style>
        .box1 {
            width: 200px;
            border: 2px solid #ccc;
            overflow: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

3.解决相邻div遮盖问题（可用作两栏布局）
两个相邻的div，其中一个浮动，另一个就会被覆盖
在这里插入图片描述
给被覆盖的元素加上overflow: hidden;，触发BFC，就可以防止被红色盒子遮挡

 <style>
        .box1 {
            height: 100px;
            width: 100px;
            float: left;
            background: red
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: #eee;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">我是一个左浮动的元素</div>
    <div class="box2">我是一个没有设置浮动,也没有触发 BFC 的元素</div>
</body>