一、BFC概念

　　BFC即Block Formatting Contexts(块级格式化上下文)，它属于普通流。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其他子元素将如何定位，以及和其他元素的关系和相互作用。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

二、触发BFC条件（只要元素满足以下任意一条即触发BFC特性）

  1. body根元素
  2. 浮动元素：float除none以外的值
  3. 绝对定位元素：position(absolute,fixed)
  4. display为inline-block,table-cells,flex
  5. overflow除了visible以外的值（hidden,auto,scroll）

三、BFC特性应用

  1. 阻止垂直外边距（margin-top,margin-bottom）折叠（属于同一个BFC的两个相邻块级元素的上下margin会发生重叠，分为两个BFC就可以取消这种margin重叠，触发其中一个div的BFC，使得两个div的margin重叠）
  2. BFC可以包含浮动的元素（清除浮动）
  3. BFC可以阻止元素被浮动元素覆盖（在第二个元素中加入overflow:hidden）

BFC的理解的更多相关文章

  1. CSS-02 BFC的理解

    两个概念 感觉BFC挺重要的,于是最近查阅网上资料后小结一下,如果有不对的地方还望指正. 先理解两个概念: BOX :盒子模型 Block-Leave Box :块级元素 display属性为bloc ...

  2. BFC的理解与应用

    什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放 ...

  3. BFC深入理解

    BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...

  4. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  5. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  6. 关于由CSS2.1所提出的的BFC的理解与样例

    今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满 ...

  7. 对BFC的理解

    转载http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 在解释 BFC 是什么之前,需要先介绍 Box.Formatt ...

  8. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  9. 浅谈BFC的理解

    在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置 ...

  10. 对 BFC 的理解

    对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC, ...

随机推荐

  1. 【LOJ】#3120. 「CTS2019 | CTSC2019」珍珠

    LOJ3120 52pts \(N - D >= 2M\)或者\(M = 0\)那么就是\(D^{N}\) 只和数字的奇偶性有关,如果有k个奇数,那么必须满足\(N - k >= 2M\) ...

  2. DP大大大大大赏

    还是前置: 动态规划的三种实现方法: 递推,递归,记忆化搜索 然后还是从斐波那契数列开始引入: 两种求斐波那契数列的方法: 1.用其他位置的结果得到自己的结果: 2.用自己的结果算其他的结果: 以上两 ...

  3. Go语言GOMAXPROCS（调整并发的运行性能）

    在 Go语言程序运行时(runtime)实现了一个小型的任务调度器.这套调度器的工作原理类似于操作系统调度线程,Go 程序调度器可以高效地将 CPU 资源分配给每一个任务.传统逻辑中,开发者需要维护线 ...

  4. Django模板（Template）系统

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点 ...

  5. Java 时间不一致

    1.new Date() 得到的时间?和系统相差 相差8个小时 2.eclipse控制台打印的时间与系统相差 相差8个小时 3.log4j日志的时间与与系统相差 相差8个小时 上述问题其实是同一个问题 ...

  6. 作业5：Java编译原理

    零.编译 1.编译器 (1)前端编译器:.java文件转变为.class文件Sun的javacEclipse JDT中的增量编译器(ECJ) (2)后端编译器:.class文件转变为机器码HotSpo ...

  7. SIP笔记

    消息代号: 1)1XX:临时响应,表示请求消息正在被处理. 2)2XX:成功响应,表示请求已被成功接收,完全理解并被接受. 3)3XX:重定向响应,表示需采取进一步以完成该请求. 4)4XX:客户机错 ...

  8. 【JavaScript】js中的构造函数，和构造函数的实例中的原型详解

    1. 构造函数作为一个对象,他也有他的原型属性,即.prototype:该属性指向的原型对象是Object. 2. 而构造函数产生的实例却没有.prototype属性,但是作为一个对象,该实例却仍然拥 ...

  9. Js的原型和原型链讲解

    原型:每个对象都会在其内部初始化一个属性,就是prototype 原型链:当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype中去找,这个prototype中会有 ...

  10. <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用

    <%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...