在了解什么是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,若为block-level box 设置inline-block则会产生BFC
  • run-in box: css3 中才有, 这儿先不讲了

Formatting Context :是W3C CSS2.1规范中的一个概念,它是页面中的一块渲染区域, 并且有一套渲染规则,他觉得了子元素如何定位, 以及和其他元素关系和相互作用

最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

  CSS2.1 中只有 BFC 和 IFCCSS3 中还增加了 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. 自适应两栏布局,根据BFC布局规则第3条:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。根据BFC布局规则第四条:BFC的区域不会与float box重叠。我们可以通过通过触发main生成BFC, 来实现自适应两栏布局.main {

      overflow: hidden;
    BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。

BFC的概念及作用的更多相关文章

  1. 浅析BFC布局的概念以及作用

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

  2. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  3. PO BO VO DTO POJO DAO 概念及其作用

    PO BO VO DTO POJO DAO 概念及其作用(附转换图) 博客分类: java javadaovopojobo        J2EE开发中大量的专业缩略语很是让人迷惑, 特别是对于刚毕业 ...

  4. Memcached概念、作用、运行原理、特性、不足简单梳理(1)

    大家可能对memcached这种产品早有了解,或者已经应用在自己的网站中了,但是也有一些朋友从来都没有听说过或者使用过.这都没什么关系,本文旨在从各个角度综合的介绍这种产品,尽量深入浅出,如果能对您现 ...

  5. 接上一篇:(二) IOC的概念和作用

    IOC的概念和作用 控制反转(IoC:Inversion of Control)把创建对象的权利转交给框架(框架的重要特征),并非面向对象的专用术语. 它包含依赖注入(DI:Dependency In ...

  6. BFC概念和作用,触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  7. [转载]PO BO VO DTO POJO DAO概念及其作用

    原文链接:http://jeoff.blog.51cto.com/186264/88517/ POJO = pure old java object or plain ordinary java ob ...

  8. 转:PO BO VO DTO POJO DAO概念及其作用

    J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋 ...

  9. [转]PO BO VO DTO POJO DAO概念及其作用(附转换图)

    来源:http://www.blogjava.net/vip01/archive/2013/05/25/92430.html J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候 ...

随机推荐

  1. 【CF633H】Fibonacci-ish II 莫队+线段树

    [CF633H]Fibonacci-ish II 题意:给你一个长度为n的序列$a_i$.m个询问,每个询问形如l,r:将[l,r]中的所有$a_i$排序并去重,设得到的新数列为$b_i$,求$b_1 ...

  2. Core Data 迁移与版本管理

    原文  http://chun.tips/blog/2014/11/28/core-data-ban-ben-qian-yi-jing-yan-zong-jie/ 主题 Core DataiOS开发 ...

  3. 提取ipa里面的资源图片

    有时候发现个不错的UI,就想扒出来看看,ipa里的图片你知道的,都不能直接用,所以找到两个方法:一.用python转换1.将ipa文件后缀改为zip,然后解压缩.2.新建一个文件夹,将解压后的包里的p ...

  4. c++的矩阵乘法加速trick

    最近读RNNLM的源代码,发现其实现矩阵乘法时使用了一个trick,这里描述一下这个trick. 首先是正常版的矩阵乘法(其实是矩阵乘向量) void matrixXvector(float* des ...

  5. [转]理解Linux的处理器负载均值

    [转自]http://www.mike.org.cn/articles/understanding-of-linux-processor-load-average/ 你可能对于Linux的负载均值(l ...

  6. 初学filter

    一. Filter介绍 Filter可以认为是Servlet的一种加强版,它主要用于对用户请求进行预处理,也可以对HTTPServletResponse进行后处理,是个典型的处理链.它的完整处理流程是 ...

  7. HDU 4734 - F(x) - [数位DP][memset优化]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4734 Time Limit: 1000/500 MS (Java/Others) Memory Lim ...

  8. MySQL复制日常维护与管理

    一.复制一些常见设置 1.mysql复制启动时参数: mysql启动时的参数包括:master_host,master_port,master_user,master_password,master_ ...

  9. linux环境下python的部署

    linux系统环境自带python2.6,但有时我们项目使用的版本可能是3.x以上等等,此时我们需要在linux中再安装项目所需的python版本,此时就涉及多版本共存问题了,很多同学在安装多个版本P ...

  10. 正则表达式(三):Unicode诸问题下篇(转)

    原文:http://www.infoq.com/cn/news/2011/04/regular-expressions-4 我们使用正则表达式,熟练掌握各种功能和结构只是手段,解决实际的问题才是真正的 ...