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. C#网络编程之WebClient

    1.什么是WebClient? 源自MSDN:提供用于将数据发送到由 URI 标识的资源及从这样的资源接收数据的常用方法. 2.OpenRead()  为从具有String指定的URI的资源下载的数据 ...

  2. ionic开发环境搭建

    Advanced HTML5 mobile development framework and SDK. Build incredible mobile apps with web technolog ...

  3. Linux Shell脚本编程－－sed命令详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  4. Vim模式

    Vim是从vi发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.和Emacs并列成为类Unix系统用户最喜欢的编辑器.    Vim的第一个版本由布莱姆 ...

  5. jq仿虾米网flash效果

    这是很久以前写的一个效果了,之前虾米音乐网首页的一个flash效果,最初觉得这flash效果也可以完全用jq来写,于是空余时间就写了下当作练习吧,现在就拿出来跟大家分享下其中的实现原理! 先上最终效果 ...

  6. ADO.NET 新特性之SqlBulkCopy(批量插入大量数据)

    转自:http://blog.csdn.net/huaer1011/article/details/2312361 在.Net1.1中无论是对于批量插入整个DataTable中的所有数据到数据库中,还 ...

  7. memcache memcached 区别

    .目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcached是建立在libmemcached的基础上 ...

  8. IOS APP IDs

    感谢分享 说下 APP ID 的组成为  APP ID Prefix + APP ID suffix APP ID Prefix 为10个字符  你不用管它 APP ID Suffix  这个有点讲究 ...

  9. 限制对比度自适应直方图均衡（Contrast Limited Adaptive histgram equalization/CLAHE)

    转自:http://www.cnblogs.com/Imageshop/archive/2013/04/07/3006334.html 一.自适应直方图均衡化(Adaptive histgram eq ...

  10. 转：Gulp的目标是取代Grunt

    原文来自于:http://www.infoq.com/cn/news/2014/02/gulp Fractal公司积极参与了数个流行Node.js模块的开发,它最近发布了一个新的构建系统gulp,希望 ...