BFC是什么？BFC有什么用？看完全明白

一、BFC是什么？

官方定义

BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

详见MDN

看不明白？那就对了！
官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）
还是让逆战在新冠疫情期的我来给你解答吧！

个人理解

1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。

二、BFC有什么用？

BFC的触发条件

1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

注：其中1、2、3需重点理解，其特性和功能下面将用代码逐个演示；
??????????????4、5、6为基本现象，按字面意思理解即可，不做重点说明。

特性1：属于同一个BFC的两个相邻容器的上下margin会重叠

功能：可解释为何相邻两容器上下外边距会发生重叠

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .top{
                width: 200px;
                height: 200px;
                background: red;
                margin-bottom: 40px;
            }
            .bottom{
                width: 200px;
                height: 200px;
                background: blue;
                margin-top: 60px;
            }
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="bottom"></div>
    </body>
</html>

代码渲染效果如下：

图1：红色块下外边距
图2：蓝色块上外边距

现象：
当给红色块下外边距margin-bottom，给蓝色块上外边距margin-top时，上下外边距会发生重叠，两个色块的间距解析为两者中的较大值（60px）。

原因：
此时红色块和蓝色块属于同一个BFC，即根元素（<html>）。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”，故两者上下边距发生重叠。

通过BFC特性解决上下margin的重叠问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .top{
                width: 200px;
                height: 200px;
                background: red;
                margin-bottom: 60px;
            }
            .bottom{
                width: 200px;
                height: 200px;
                background: blue;
                margin-top: 60px;
            }
            .box{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="box">
            <div class="bottom"></div>
        </div>
    </body>
</html>

代码渲染效果如下：

现象：
给蓝色块添加父元素.box并添加声明overflow: hidden;可以解决红色块和蓝色块的上下margin重叠问题。

原因：
通过给蓝色块添加父元素.box并添加声明overflow: hidden;，使得父元素.box触发了BFC（见BFC触发条件3），此时红色块和蓝色块属于不同的BFC，红色块的BFC仍然是根元素（<html>），蓝色块的BFC是父元素.box。即不满足BFC特性1中的规定“属于同一个BFC······”，从而解决了两者的上下margin重叠问题。

注：overflow: hidden;只是触发BFC众多条件中的一个，使用其他条件也能解决此问题，注意触发条件可能造成的其他影响即可，如浮动会造成的脱离文档流等。

特性2：计算BFC高度时浮动元素也参于计算

功能：可解释为何overflow: hidden;能解决父元素高度塌陷

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .outside{
                border: 10px solid blue;
            }
            .inside{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outside">
            <div class="inside"></div>
        </div>
    </body>
</html>

代码渲染效果如下：

现象：
当父元素.outside没有设置高度且子元素.inside都浮动时，父元素.outside会出现高度塌陷。

原因：
子元素.inside设置浮动后脱离文档流，而父元素.outside又没有设置高度，故父元素.outside会出现高度塌陷。

通过BFC特性解决高度塌陷问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .outside{
                border: 10px solid blue;
                overflow: hidden;
            }
            .inside{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outside">
            <div class="inside"></div>
        </div>
    </body>
</html>

代码渲染效果如下：

现象：
给父元素.outside添加声明overflow: hidden;，父元素高度塌陷消失。

原因：
给父元素.outside添加声明overflow: hidden;，使得父元素.outside触发了BFC（见BFC触发条件3），而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.inside虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。

特性3：BFC的区域不会与浮动容器发生重叠

功能：在布局上实现自适应两栏（三栏）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .left{
                width: 100px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
            .right{
                height: 300px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>

    </body>
</html>

代码渲染效果如下：

现象：
正常情况下，左侧元素.left浮动时，会与右侧元素.right发生重叠，不能实现自适应两栏效果。

原因：
左侧元素浮动，脱离文档流。

通过BFC特性解决重叠问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .left{
                width: 100px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
            .right{
                height: 300px;
                background: blue;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>

    </body>
</html>

代码渲染效果如下：

现象：
给右侧元素.right添加声明overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。

原因：
给右侧元素.right添加声明overflow: hidden;，使得右侧元素触发了BFC（见BFC触发条件3），而BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。

特性4：BFC内的容器在垂直方向依次排列

类似正常情况下块元素在垂直方向上依次排列，较易理解。

特性5：元素的margin-left与其包含块的border-left相接触

基本现象，较易理解。

特性6：BFC是独立容器，容器内部元素不会影响容器外部元素

较易理解。

BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。

原文地址：https://www.cnblogs.com/qs-cnblogs/p/12349887.html

时间： 2024-11-07 07:13:08

BFC是什么？BFC有什么用？看完全明白的相关文章

不懂程序看的明白《黑客帝国》吗？

前段时间出差周末没事就在酒店又把黑客帝国重温了一遍,不看不要紧,十年后再看发现以前对这部电影的理解完全错了. <黑客1>是 1999 年出的,我还在读高中,第一次看还在学校附近的录像厅,枪版. 整个画面黑漆漆的,看了不到半小时直接睡过去了,醒来时已经是最后的高潮枪战部分,感觉结尾打斗好看,剧情不懂. 2003 年<黑客2&3>一起推出后,又连起来看了一遍,老实说当时很多概念还是没看懂,大概觉得是一个人类反抗机器统治的故事. 如今这次看完后再回想起来,当时很多概念看不太明白可

Ansi,UTF8,Unicode,ASCII编码的区别 ---我看完了 明白了很多

来自:http://blog.csdn.net/xiongxiao/article/details/3741731 ------------------------------------------------------------------------ 近日需要不同的编码,关于上述编码,一直迷迷糊糊,查了些资料,总算大致了解了,下面全是从网上搜来的: 1.  ASCII和Ansi编码    字符内码(charcter code)指的是用来代表字符的内码.读者在输入和存储文档时都要使用内码

uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型 - 大总结，看完全明白了

转自:http://blog.csdn.net/kiddy19850221/article/details/6655066 uint8_t / uint16_t / uint32_t /uint64_t  是什么数据类型 在nesc的代码中,你会看到很多你不认识的数据类型,比如uint8_t等.咋一看,好像是个新的数据类型,不过C语言(nesc是C的扩展)里面好像没有这种数据类型啊!怎么又是u又是_t的?很多人有这样的疑问.论坛上就有人问:以*_t结尾的类型是不是都是long型的?在baidu上

气死人不偿命，Q_OBJECT导致的C++报错，而且还看不明白

为了代码可以同时适应VC++和MingW编译器,我改动了我的代码,变成: #ifdef _MSC_VER #pragma comment(lib, "crypt32.lib") // Link OK,Linux 也要附带这两个库,格式是 -lcrypt32 -lws2_32 #pragma comment(lib, "ws2_32.lib") // Link OK //#pragma comment(lib, "dnsapi.lib") // 没

Vlan的详解-----看完明白tag and untagged

这里说的Vlan是符合IEEE 802.1Q标准的Vlan. 其帧结构如下: |DA|SA|tag|Type|Date|CRC| 相对于普通以太网帧,Vlan帧在源Mac地址后添加了一个4byte长的Tag字段.这个字段具体又分为: |TPID|priority|CFI|Vlan ID| TPID: tag protocal ID为固定值:0x8100priority: 3bits长,有8个优先级CFI: 规范为0,非规范为1Vlan ID: 12bits长,取值1-4094 这个tag非常重要

css规范 BFC

1.BFC的概念 BFC全称Block Formatting Context ,中文直译为块级格式上下文.它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.通俗的来说:BFC是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子内部的元素无论如何翻江倒海,都不会影响到外部.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)

布局和BFC

块级格式化上下文 BFC 是W3C CSS2.1规范中的一个概念,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.目前除了IE6-7外其他浏览器均支持BFC.在CSS3中BFC叫做Flow Root. 与普通容器相比,BFC元素可以看作是隔离了的独立容器,内部的元素不会在布局上影响外面元素. 如何形成BFC 满足任意下面条件的元素可形成BFC: 1. 浮动元素,float除了none外的值 2. 绝对定位元素,position:absolute/fixed 3. display为

BFC——一个我们容易忽视掉的布局神器

  今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现,在给两个块级元素设置同样的marg

BFC——块级格式化上下文

BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题. 简单来说,BFC就是一种属性.这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 二.BFC的触发 浮动