【CSS】什么是BFC？

最新推荐文章于 2024-04-22 15:43:00 发布
最新推荐文章于 2024-04-22 15:43:00 发布
阅读量168 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z914020826/article/details/131977043
版权

常见定位方案

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

  • 普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

  • 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

  • 绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 的定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

  • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

  • BFC的区域不会与float box重叠。

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

  • 计算BFC的高度时，浮动元素也参与计算。

创建 BFC 的条件

  • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；
  • 元素设置绝对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex 等；
  • overflow 值为：hidden、auto、scroll；

BFC的作用

1.利用BFC避免margin重叠。

先看一段代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    p {
        color: #000;
        background: orange;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 30px;
    }
</style>

<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>

</html>

页面生成的效果就是这样的，清楚的看到两个盒子的margin重叠了

image-20230728105737761

image-20230728105759803

根据上文BFC盒子布局规则的第二条，属于同一个BFC的两个相邻Box的margin会发生重叠。

所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #000;
        background: orange;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

此时我们可以看到页面展示的两个盒子的margin不再重叠

image-20230728110424451

2.自适应两栏布局

先上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        position: relative;
    }

    .left {
        width: 200px;
        height: 200px;
        /* 这里给 box1 设置左浮动 */
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }

    .right {
        height: 400px;
        width: 400px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>

<body>
    <div class="left">BOX1</div>
    <div class="right">BOX2</div>
</body>

</html>

页面展示的效果可以清楚的看到box1由于浮动的原因，box2与box1重叠在了一起

image-20230728111517221

因为BFC的区域不会与float Box重叠，所以我们可以让box2单独成为一个BFC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        position: relative;
    }

    .left {
        width: 200px;
        height: 200px;
        /* 这里给 box1 设置左浮动 */
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }

    .right {
        height: 400px;
        width: 400px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        /* box2单独成为一个BFC */
        overflow: hidden;
    }
</style>

<body>
    <div class="left">BOX1</div>
    <div class="right">BOX2</div>
</body>

</html>

box2此时会自动的适应宽度，这时就形成了两栏自适应的布局

image-20230728112256621

3.清除浮动。

先看示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }

    .child {
        background: orange;
        border: 3px solid blue;
        width: 100px;
        height: 100px;
        float: left;
    }
</style>

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

由于父元素没有设置高度，并且子元素设置了浮动，此时就会出现高度塌陷的问题

image-20230728112716542

由于计算BFC的高度时，浮动元素也参与计算。我们只需要给父元素成为BFC，就能解决这个问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        /* 让父元素成为BFC */
        overflow: hidden;
    }

    .child {
        background: orange;
        border: 3px solid blue;
        width: 100px;
        height: 100px;
        float: left;
    }
</style>

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

此时可以看到，父盒子高度塌陷的问题已经解决

image-20230728112949932
参考文章：知乎-一次弄懂css的BFC

Zhou YiHang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS之BFC
从来无所求，所得皆惊喜！
06-04 1326
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
css中的BFC
weixin_48210599的博客
09-11 404
css中的BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成BFC的条件 ​ 1、浮动元素，float 除 none 以外的值； ​ 2、定位元素，position（absolute，fixed）； ​ 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； ​ 4、overflow
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7160
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
CSS中的BFC
最新发布
小卡酷谋的博客
04-22 939
简单来说，就是页面中的一块渲染区域，并且有一套自己的渲染规则。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。在上面的代码中，父元素的高度是靠子元素撑起来的，但是一旦我们给子元素设置了浮动，那么父元素的高度就塌陷了。效果：在上面的代码中，我们要设置两栏布局，左边栏宽度固定，右边栏自适应。基于此特点，我们就可以制作两栏自适应布局，方法就是给固定栏设置固定宽度，给不固定栏开启。设置了浮动效果，所以会脱离标准流，自然而然。上面只记录了一些常见的方式，完整的。的高度时，浮动子元素也参与计算。
【CSS】什么是BFC？BFC有什么作用？
m0_61049675的博客
02-05 2634
BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。：只需要把两个div放置不同BFC中，那这两个BFC的内容将不会互相干扰，将两个di分别放置container容器中，然后通过overflow:hidden触发BFC;：这是因为给子元素添加了浮动，使它脱离了文档流；：红色方框覆盖蓝色方块；
CSS中的BFC是什么？怎么用？
热门推荐
webchang的博客
04-03 1万+
BFC（块格式化上下文）使用详解
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
浅析CSS里的BFC和IFC的用法
01-19
一 什么是 BFC 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染...
CSS中的BFC详解：定义、触发方式及应用场景
小王的技术库
05-25 3516
1.什么是BFC? BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 Block Formatting Context：块级格式化上下文。 W3C的官方解释： 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。 2.如何触发BFC? float不为non
CSS中的BFC是什么？
范德萨的博客
01-05 389
这个元素高度怎么没了？这两栏布局怎么没法自适应？这两个元素的间距怎么有点奇怪的样子？......原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念以上能够完整的体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素。
CSS的BFC详解
m0_61489612的博客
02-21 193
BFC是即 Block Formatting Contexts (块级格式化上下文)，开启了BFC的元素和它的子元素之间相当于是相互独立的容器，对彼此的操作都不会影响到其他的元素。
什么是BFC? 怎么应用？
weixin_43758377的博客
10-27 565
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定
css中的BFC是什么（块级格式上下文）
qq_52928592的博客
01-30 132
作业
CSS中的BFC，是什么？
欢迎来到我的博客
07-18 156
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
[CSS]中块级格式化上下文（BFC）
qq_29069649的博客
03-26 537
介绍了CSS中的块级格式化上下文BFC，和如何利用BFC处理问题
CSS 中BFC是什么？
TianXuab的博客
11-10 682
BFC是块级格式化上下文（Block Formatting Context）的缩写，它是Web页面中的一种CSS渲染模式，用于控制块级盒子的布局及浮动。BFC具有一些特定的特性，例如内部的盒子会在垂直方向上一个接一个地放置，不会发生外边距重叠等。在接下来的示例中，我们将通过代码详解BFC的特性和应用。
CSS 中的 BFC 是什么？
fe_watermelon的博客
05-16 1822
大家好，我是前端西瓜哥。今天来学习 BFC。BFC，为 Block Formatting Context 的缩写，中文翻译为 块格式上下文。BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局。怎样的元素属于 BFC？根元素，也就是 HTML 元素浮动元素，即使用了 float 属性且值不为 none绝对定位元素块级容器（如 display 的值为 inline-blocks、table-cells、tabl
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值