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. Oracle 客户端连接服务器[转]

    很多朋友在开发项目中并不是每个人用一个数据库,而是有单独的一台主机作为开发的数据库服务器,这样,就需要我们的开发人员去连接它.          首先是进入oracle的 Net  Mananger:

  2. 0525Scram项目6.0

    一.任务完成情况: 主界面基本完成,虽然界面看起来不是很美观,也比较简洁,但是这是我们一起商讨,各自找素材,找图片.还有一些动态的! 燃尽图: 二.界面演示: 三. 任务看板: 四.Spring1回顾 ...

  3. response下载文件 （转载）

    核心代码: ? DataSet ds = dBll.GetList("ID=" + ID); ? string docName = "a.doc";//文件名, ...

  4. springmvc学习第四天

    数据类型的转换.格式化.校验 1.数据绑定流程 1. Spring MVC 主框架将 ServletRequest 对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创 ...

  5. hdu 2059

    ps:终于解决了....卡了我好久.最后用了DP.然后还有记忆化搜索优化了一下.终于AC了 思路:要计算dp[n](就是到第n个站的最短时间,也就是最优方案),必须知道dp[0]到dp[n-1] 设j ...

  6. SQL.WITH AS.公用表表达式（CTE）

    一．WITH AS的含义    WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是 ...

  7. IIS 7.5 高并发参数配置

    IIS 7.5 高并发参数配置 由于之前使用的是默认配置,服务器最多只能处理5000个同时请求,对于高并发请求,参照文档设置10万并发 1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为 ...

  8. 关于Oracle10G在库内导数据时，用到的更新语句----ZT

    两种方法:     -- 方法1. UPDATE  表2 SET   表2.C  =  (SELECT  B  FROM  表1  WHERE   表1.A = 表2.A) WHERE   EXIST ...

  9. 简单poi读取excel

    1.添加依赖jar包 maven配置: <!-- poi being --> <dependency> <groupId>org.apache.poi</gr ...

  10. 百度之星热身赛-1001（dfs拓扑排序）

    题意:作为年度优秀魔法学员的奖赏,哈利得到了一台具有魔力的计算机.这台计算机一旦开始处理某个任务,就会一直处理到这个任务结束为止(所以你可以认为它是单线程的).有一天,这台计算机得到了n个任务要处理, ...

热门专题

python统计该字符串中字符总数
NewtonJson读取json文件出一堆斜杠
file file = new file()的用法
使用JPA的“Hello World”
wpf TextDecorations依赖属性
jmeter tps波动过大
vulhub redis复现
dom4j中文api
python3爬爱奇艺vip视频
cordova安装失败 cert
copy loss是什么
回归模型P值多少算通过t检验
linux引用第三方库
pycharm正则表达式替换末尾字符
虽然msh长大了,但她还是很喜欢找点游戏自娱自乐
qt 监听鼠标位置 切换鼠标为放缩窗口
prettytable库怎么安装
亚马逊上搭建openvpn
redis 如何遍历hash
mysql 循还删除大批量数据