定义

  在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域

触发条件

  满足下列条件之一就可触发BFC

  【1】根元素,即HTML元素

  【2】float的值不为none

  【3】overflow的值不为visible

  【4】display的值为inline-block、table-cell、table-caption

  【5】position的值为absolute或fixed

作用

  BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。它与普通的块框类似,但不同之处在于:

  【1】可以阻止元素被浮动元素覆盖

  <说明>通过改变内容为BFC背景为红色的盒子的属性值,使其成为BFC,以此阻止被绿色的浮动盒子覆盖

  【2】可以包含浮动元素

  <说明>通过改变高度塌陷的黑色边框的盒子的属性值,使其成为BFC,以此来包含绿色的浮动盒子

  【3】属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠

  <说明>淡红色背景的块级盒子二的外面包一个div,通过改变此div的属性使红色盒子与绿色盒子分属于两个不同的BFC,以此来阻止margin重叠

深入理解BFC的更多相关文章

  1. 全面理解BFC

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  2. 深入理解BFC和Margin Collapse

    深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...

  3. 理解 BFC

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章, 介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等). 虽然我知道如何利用 BFC 解决这些问 ...

  4. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...

  5. 理解BFC

    BFC:块格式化上下文(Block Formatting Context) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. BFC 是一 ...

  6. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...

  7. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  8. 深入理解BFC和外边距合并(Margin Collapse)

    一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...

  9. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. 浅谈Java中的equals和==(转)

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...

  2. 华为2013校招之哈工大威海 上机试题之一:报数问题:设有N 个人围坐一圈并按顺时针方向从1 到N 编号,从第S个人开始进行1 到M报数,报 数到第 M个人时,此人出圈,再从他的下一个人重新开始1 到 M的报数,如此进行下去直 到所有的人都出圈为止。现要打印出出圈次序。

    1.  报数游戏 问题描述: 设有N 个人围坐一圈并按顺时针方向从1 到N 编号,从第S个人开始进行1 到M报数,报 数到第 M个人时,此人出圈,再从他的下一个人重新开始1 到 M的报数,如此进行下去 ...

  3. CSS自学笔记(8):CSS拓展(一)

    CSS元素对齐 可以使用margin属性类进行元素的水平对齐 水平对齐块元素时,可以将块元素的margin属性定义为"auto",这里需要注意的是,应该要声明!DOCTYPE,否则 ...

  4. 贪心算法(Greedy Algorithm)最小生成树 克鲁斯卡尔算法(Kruskal&amp;#39;s algorithm)

    克鲁斯卡尔算法(Kruskal's algorithm)它既是古典最低的一个简单的了解生成树算法. 这充分反映了这一点贪心算法的精髓.该方法可以通常的图被表示.图选择这里借用Wikipedia在.非常 ...

  5. java学习笔记----运算符

    一.算数运算符 特别说明: 加 ,减 ,乘 ,除 与数学运算一致 取余符号看被除数 自加(减)运算:++a,--a;先做自加(自减)运算在做其他运算 a++,a--;先做其他运算在做自加(自减)运算 ...

  6. 对js运算符“||”和“&amp;&amp;”的总结

    首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用 ...

  7. Selenium库,Python精品教程!

    什么是Selenium selenium基本使用 用python写爬虫的时候,主要用的是selenium的Webdriver,我们可以通过下面的方式先看看Selenium.Webdriver支持哪些浏 ...

  8. 高斯消元part2

    今天整一整高斯消元的模板,正经的 高斯消元主要用于解n元一次线性方程组与判断是否有解 主要思想? 就是高斯消元啊 主要思想是理想状态下消为每行除最后一项外只有一个1,并且每行位置互异,具体看下面. 这 ...

  9. 关于信号打断正在读取终端的read与select来监视0文件描述符的问题

    首先说一下对于这个问题外的一些话: 我觉得我们应该有种质疑的态度,因为接下来的这个问题就和我们平常所想的不一样. 介绍一下问题: 曾经一直听说信号可以打断一个正在阻塞的进程,但是今天我试了一下关于信号 ...

  10. HDU 1023(卡特兰数 数学)

    题意是求一列连续升序的数经过一个栈之后能变成的不同顺序的数目. 开始时依然摸不着头脑,借鉴了别人的博客之后,才知道这是卡特兰数,卡特兰数的计算公式是:a( n )  =  ( ( 4*n-2 ) / ...