BFC中的B指的是block，对应的还有IFC，I指的是inline。
对于BFC的理解可以参考层叠上下文。页面中，盒子的排布规则，是生效在对应的BFC中。两个BFC中的布局互不影响。
页面的本身的根本身就是BFC，但是页面中的其他元素，则需要我们用css去设置，才会生成新的BFC。有以下方法：

  1. float的值不为none。
  2. overflow的值不为visible。
  3. display的值为table-cell、table-caption、inline-block中的任一个。
  4. position的值不为relative与static。

详细内容可见另一博主的文章：http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

BFC——块级格式上下文的更多相关文章

  1. BFC块级格式上下文

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  2. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  3. BFC块级格式

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  4. 什么是BFC（块级格式上下文）？

    ㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...

  5. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  6. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  7. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  8. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  9. CSS--理解块级格式上下文（BFC）

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...

随机推荐

  1. 以下是jQuery和JavaScript实现相同操作的等价代码。

    选择元素  Javascript代码 1.// jQuery   2.var els = $('.el');   3.  4.// 原生方法   5.var els = document.queryS ...

  2. zepto源码研究 - zepto.js-3 (常用的工具)

    pluck: /** * 根据是否存在此属性来获取当前集合,返回一组属性值 * @param property * @returns {*} */ pluck: function(property){ ...

  3. cookie，localStorage，sessionStorage

    1.cookie 由于HTTP是一种无状态的协议,服务器单从请求内容上无法判断客户身份.因此,cookie弥补这个缺陷,每次请求都携带cookie,这样服务器就能能知道不同的客户端请求了. 对于同一域 ...

  4. 快速入门cocos2d-x jsbinding

    如果你是一个cocos2d-x的老手,那你可以忽略这篇博文,如果你是一个接触过javascript,想通过HTML5做游戏的,但是苦于不知道如何下手,那么这篇博文可能会帮到你. cocos2dx-js ...

  5. PHP安全设置（转载）

    大家都知道PHP已经是当前最流行的Web应用编程语言了.但是也与其他脚本语言一样,PHP也有几个很危险的安全漏洞.所以在这篇教学文章中,我们将大致看看几个实用的技巧来让你避免一些常见的PHP安全问题. ...

  6. 用c++11打造类似于python的range

    python中的range函数表示一个连续的有序序列,range使用起来很方便,因为在定义时就隐含了初始化过程,因为只需要给begin()和end()或者仅仅一个end(),就能表示一个连续的序列.还 ...

  7. 单/多行文本添加省略号 (oﾟωﾟo)

    1.单行文本添加省略号 一般用于新闻列表展示 li{ width: 200px; height: 30px; line-height: 30px; cursor: pointer; list-styl ...

  8. IOS NSUserDefaults 讲解 用法

    IOS NSUserDefaults 讲解 用法    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults ...

  9. Javascript Array Distinct (array.reduce实现)

    javascript 没有原生的Distinct功能 . (至少现在还没有)但我们可以通过简单的script 自己实现 . Distinct就是把数组中重复出现2次或以上的值给删除掉,确保数组内每个值 ...

  10. VS2013中使用GDI+绘图

    VC范例,400多个例子源代码下载 http://download.csdn.net/detail/bigtree_mfc/7727977 VS2013中使用GDI+绘图和VC6.0不同,在VC6.0 ...