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. 学习PYTHON之路， DAY 2 - PYTHON 基础 2（基础数据类型）

    一 字符串格式化输出 name = 'nikita' age = 18 print ("I'am %s, age is %d") % (name, age) PS: 字符串是 %s ...

  2. Swift 01.String

    1.字符串拼接 var num1 = "hello,world" var name = "xiaoming" var age = let student = n ...

  3. iOS开发UI篇—推荐两个好用的Xcode插件（提供下载链接）

    iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接) 这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImag ...

  4. longitude

    确保有loc:[longitude, latitude]属性给loc增加索引AttractionSchema.index({loc: '2d'});使用geoNeardb.places.find( { ...

  5. 关于重定向urlrewriter.urlmapping

    大家都知道web.config 中的 urlMappings怎么用 <system.web> <urlMappings enabled="true"> &l ...

  6. .net解决数据导出excel时的格式问题

    在项目中一般都需要将报表数据导出到EXCEL中,但经常出现导出长串数据(如身份证)到EXCEL中后显示为科学计数法的格式,或者报表中显示为001的数据导出到Excel后成了1的格式. 下面简单介绍一下 ...

  7. FreeBSD打开DTrace支持

    主要翻译自:https://wiki.freebsd.org/DTrace FreeBSD跟Linux发行版一个比较大的差异,就是提倡源码构建.因此这里提到比较多的编译开关设置.自2012年5月后,D ...

  8. 使用 IMQ+HTB+iptable 统一流量控制心得

    IMQ 是中介队列设备的简称,是一个虚拟的网卡设备,与物理网卡不同的是,通过它可以进行全局的流量整形,不需要一个网卡一个网卡地限速.这对有多个ISP接入的情况特别方便.配合 Iptables,可以非常 ...

  9. NSDictionary读取数据类型异常问题.

    起因:做网络交互时,经常会使用JSON作为数据的承载体,本来是件好事,但是用多了,发现iOS侧偶尔会出现异常,几经比较发现是服务器给的数据有问题,该给INT的给按照STR给了,服务器能做动态更新,可客 ...

  10. webservice可以访问但是不能调用方法

        <webServices>               <protocols>                 <add   name="HttpSoa ...

热门专题

IDEAi java导入jar
solidity 遍历mapping
wpf动态生成绑定datagrid
editplus打开文件夹
mac最小化和隐藏窗口的区别
xpath断言在jmeter中怎么用
在单个阶段中执行多个$bucket聚合
maltab legend 只显示颜色 不显示line
vs2019项目以管理员身份运行
RestTemplate发送post请求json
java读取数据库时间不对
html mac 滚动条一直可以滚动
apache 默认网站目录的权限是600
还要定义标准属性“appearance”以实现兼容性
react native 有类似ant design
某一值是数组的哪一项 js
jquery多个输入框的值
数据库xml字段如何查询
ubuntu 16 java 环境变量
jmeter测试如何看token值