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#学习笔记】二、面向对象编程

    2.1 抽象类与接口 1)概念 抽象类是特殊的类,只是不能被实例化:除此以外,具有类的其他特性:重要的是抽象类可以包括抽象方法,这是普通类所不能的.抽象方法只能声明于抽象类中,且不包含任何实现,派生类 ...

  2. （三）Knockout - ViewModel 的使用2 - select、list 应用

    select下拉菜单 <select>常用的data-bind参数: •options : 指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项.如果是ko. ...

  3. HDU 3721 Building Roads (2010 Asia Tianjin Regional Contest) - from lanshui_Yang

    感慨一下,区域赛的题目果然很费脑啊!!不过确实是一道不可多得的好题目!! 题目大意:给你一棵有n个节点的树,让你移动树中一条边的位置,即将这条边连接到任意两个顶点(边的大小不变),要求使得到的新树的直 ...

  4. 准备开发一个基于canvas的图表库，记录一些东西（一）

    开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...

  5. CSS选择器解析

    通配符选择器 Universal Selector * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizin ...

  6. WDCP一些常用的一健安装包可选安装组件

    为有更好的性能,也为更简洁的系统,一些不是常用或不是基本的功能,都将做为可选的安装组件需要用到的就安装 memcache的安装 wget -c http://down.wdlinux.cn/in/me ...

  7. JS函数与call()apply()详解

    JavaScript中的每个函数都是一个对象. 因为函数都是对象,它们有自己的属性和方法.我们可以把它们看作数据(data). 函数和方法的区别? 函数立足于它们自己(例如:alert()), 而方法 ...

  8. 消息通信机制NSNotificationCenter -备

    消息通信机制NSNotificationCenter的学习.最近写程序需要用到这类,研究了下,现把成果和 NSNotificationCenter是专门供程序中不同类间的消息通信而设置的,使用起来极为 ...

  9. PHP常用字符串函数

    1:访问子字符串:strpos()2:提取子字符串:substr()3:逐字节处理字符串:strstr()4:计算字符串长度:strlen()5:替换子字符串:substr_replace()6:按字 ...

  10. 标签 Attribute

    在一个类上面放一个标签,可以用来表示一些特定规则,比如某个对象的某个属性不想被json化,那么我们在它头上放个标签就行了,或是做ORM时指定某个Class对应的table名字等. 最后标签是通过反射来 ...