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++朝花夕拾【更新】

    C++拾遗 更新一些平时遇到的小细节: 1.关于类的无参构造函数和带有全部默认参考值的构造函数的区别 书上说的是带有全部默认值的构造函数就是无参构造函数,私以为不以为然,来看下边这个例子: #incl ...

  2. nginx实现负载均衡

    A服务器IP :192.168.5.149 (主) B服务器IP :192.168.5.27 C服务器IP :192.168.5.126 A服务器配置: 打开nginx.conf,文件位置在nginx ...

  3. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  4. 手机时间选择插件 Jquery

    // 时间选择 var currYear = (new Date()).getFullYear() var opt_data = { preset: 'date', //日期 theme: 'andr ...

  5. 微软SpeechRecognitionEngine

    API官网手册:http://msdn.microsoft.com/zh-cn/library/System.Speech.Recognition.SpeechRecognitionEngine(v= ...

  6. eclips常用快捷键

    本文取自:Eclipse中常用快捷键 - yizhang88的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/yizhang88/article/details/2 ...

  7. 转：VC中UpdateData()函数的使用

    VC中UpdateData()函数的使用 UpdateData(FALSE)与UpdateData(TRUE)是相反的过程     UpdateData(FALSE)是把程序中改变的值更新到控件中去  ...

  8. Unity中的各种寻找GameObject方法

    1.GameObject.Find():寻找Hierarchy面板中的activie 不为false的游戏对象: 路径如官方事例写法: public class ExampleClass : Mono ...

  9. Altium Designer打印设置

    1:1打印PCB设置 如图1所示,打开PCB,点击“FileàPage Setup…”. 进入设置对话框,在“ScalingàScale Mode”下拉条中选择 “Scale Print”. 如图3所 ...

  10. Inno Setup for Windows service

    Inno Setup for Windows service? up vote86down votefavorite 77 I have a .Net Windows service. I want ...