BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。

一、BFC是什么？

　　在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

　　Box: CSS布局的基本单位

　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

  • block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
  • run-in box: css3 中才有， 这儿先不讲了。

　　Formatting context

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

　　CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

　　BFC 定义

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

　　BFC布局规则：

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

二、哪些元素会生成BFC?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

三、BFC的作用及原理

　　1. 自适应两栏布局

　　代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

　　页面：
　　

　　根据BFC布局规则第3条：

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

　　因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

　　根据BFC布局规则第四条：

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

　　我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。

1
2
3
.main {
    overflow: hidden;
}

　　当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

　　

　　2. 清除内部浮动

　　代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

　　页面：
　　

　　根据BFC布局规则第六条：

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

　　为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

　　代码：

1
2
3
.par {
    overflow: hidden;
}

　　效果如下：
　　 

　　3. 防止垂直 margin 重叠

　　代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

　　页面：
　　

　　两个p之间的距离为100px，发送了margin重叠。
　　根据BFC布局规则第二条：

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

　　我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
　　代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

　　效果如下:
　　

总结

　　其实以上的几个例子都体现了BFC布局规则第五条：

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

　　因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

您可能感兴趣的相关文章

原文来自：前端文摘：BFC 神奇背后的原理 via Melon Space

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

 
分类: CSS3
标签: css, BFC
好文要顶 关注我 收藏该文  
47
1
 
(请您对文章做出评价)
 
posted @ 2014-04-23 22:47 梦想天空（山边小溪） 阅读(27545) 评论(32) 编辑 收藏
 
发表评论
 

#1楼 2014-04-23 20:23 | 咿呀学语 

学习了

#2楼 2014-04-24 10:57 | 十一加二 

好文！学习了

#3楼[楼主] 2014-04-25 21:01 | 梦想天空（山边小溪） 

@ 十一加二
@咿呀学语
Thank you! :)

#4楼 2014-04-26 08:50 | majinyun0802 

#5楼 2014-04-28 17:28 | 绝忘 

赞！！

#6楼[楼主] 2014-04-29 10:11 | 梦想天空（山边小溪） 

@ 绝忘
@majinyun0802
谢谢支持！

#7楼 2014-11-04 00:15 | Venuluo 

想问下博主 哪里看到 根元素会生成bfc。。

#9楼 2014-11-25 12:04 | Venuluo 

@ Janking丶琅琊
谢谢。。

#10楼 2015-01-03 20:48 | 兵之诡道者 

good，刚来了解bfc

#11楼 2015-03-06 13:05 | androidfeng 

好文 大赞！

#12楼[楼主] 2015-03-08 11:58 | 梦想天空（山边小溪） 

@ androidfeng
@兵之诡道者
感谢支持！

#13楼 2015-03-23 11:03 | oadaM92 

学习了！

#14楼[楼主] 2015-03-23 16:10 | 梦想天空（山边小溪） 

@ oadaM92
引用学习了！
欢迎继续关注！

#15楼 2015-03-28 17:22 | ~风影*IT~ 

写得 通俗易懂·~已经收藏~~

#16楼 2015-03-30 14:47 | log琥珀① 

学习了，能否在讲讲ifc呢？
有个问题：
二 哪些元素会生成BFC?
display为inline-block, table-cell, table-caption, flex, inline-flex
这里，inling-block 生成的不是inline-level box么 怎么会触发bfc，而不是ifc呢

#17楼[楼主] 2015-04-04 20:25 | 梦想天空（山边小溪） 

@ log琥珀①
引用学习了，能否在讲讲ifc呢？
有个问题：
二 哪些元素会生成BFC?
display为inline-block, table-cell, table-caption, flex, inline-flex
这里，inling-block 生成的不是inline-level box么 怎么会触发bfc，而不是ifc呢
inline生成的才是IFC，inline-block生成的是BFC。

#18楼[楼主] 2015-04-04 20:25 | 梦想天空（山边小溪） 

@ ~风影*IT~
引用写得 通俗易懂·~已经收藏~~
谢谢支持！:)

#19楼 2015-04-22 19:31 | NancyChan 

【转】前端精选文摘：BFC 神奇背后的原理的更多相关文章

  1. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  2. 前端精选文摘：css之BFC 神奇背后的原理（转载）

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  3. BFC 神奇背后的原理

    BFC已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发BFC, 以及BFC的一些用处(如清浮动,防止margin重叠等).虽然我知道如何利用BFC解决这些问题,但当别人问我BFC ...

  4. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  5. 前端精选文摘：css之GFC 神奇背后的原理（整理）

    CSS3 Grid Layout Web页面的布局,我们常见的主要有“浮动布局(float)”.“定位布局(position)”.“行内块布局(inline-block)”.“CSS3的多栏布局(Co ...

  6. 览器全面禁用三方 Cookie 全栈前端精选 4月16日

    览器全面禁用三方 Cookie 全栈前端精选 4月16日

  7. 前端知识总结--BFC

    Block Formatting Context,中文直译为块级格式上下文. 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  8. 深入浅出！从语义角度分析隐藏在Unity协程背后的原理

    Unity的协程使用起来比较方便,但是由于其封装和隐藏了太多细节,使其看起来比较神秘.比如协程是否是真正的异步执行?协程与线程到底是什么关系?本文将从语义角度来分析隐藏在协程背后的原理,并使用C++来 ...

  9. 从XML文件乱码问题，探寻其背后的原理

    出现应用程序读取XML文件乱码的场景: 加入xml文件以<?xml version="1.0" encoding="utf-8" ?> 格式的:如果 ...

随机推荐

  1. 关于JS一些验证邮箱的一些问题

    if (type == "Email") { var strText = $("#EmailSaveText").val(); //strReg = /^\w+ ...

  2. application loader上传报90158错误

    ERROR ITMS-90158:"The following URL schemes found in your app are not in the current format:[XX ...

  3. C++中不同数据类型的互相转换

    1.string --> char *   char * p = (char*)str.c_str(); 2.char * -->string   char *p = "aaa& ...

  4. innerHTML，innertext ，textcontent，write（）

    innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...

  5. 说说chrome上的JS调试

    步骤:审查元素 ->source->选择js文件 ->设置断点 ->触发函数 ->进入调试点step over 到elements目录下双击某一块代码还可以立刻修改,ct ...

  6. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  7. RBL开发笔记二

     17:13:55 2014-08-25 有以下几个点:  第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了  这里就定义了一个SystemConfig.h 专门做这个事情  当然是需要make ...

  8. Spring使用——切面编程AOP使用

    在我们的spring xml配置中,加上<aop:config>之后,Eclipse报错,提示The prefix "aop" for element "ao ...

  9. 没有好看的 Terminal 怎么能够快乐地写代码

    换了好几回Terminal默认的配色,真是难看哭了,作为一只有生活追求的序媛,当然不能安(zuo)之(yi)若(dai)素(bi)了 1 自定义 Terminal问候语 sudo pico /etc/ ...

  10. Thrift 个人实战--初次体验Thrift

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

热门专题

vue router详解
matlab 计算机视觉系统工具箱
安全接口rsa md5
thinkphp5多模块
windows10 business和consumer区别
linux 编译某个驱动
代数式改写为正确的c语言表达式
Inno Setup入门(八)——有选择性的安装文件
将list中指定元素放到第一位
fmx ttreeview响应事件有哪些
develop分支是做什么用的
LauncheActivity每次都启动
linux gpu 查看显存
codeblocks 引用dll
fasttext 预测多个结果
数SQL据库分发订阅发布类型
华三交换机如何删除vlan
vscode中输入sql->无法识别
c＋＋build中延时发送
九色地址github