块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

  • 根元素或包含根元素的元素
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC 形成条件的更多相关文章

  1. BFC开启条件

    当元素CSS属性设置了下列之一时,即可创建一个BFC: float:left|right position:absolute|fixed display: table-cell|table-capti ...

  2. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

  3. BFC深入理解

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

  4. BFC之浅析篇

    BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...

  5. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  6. CSS3与页面布局学习总结（三）——BFC、定位、浮动、垂直居中

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  8. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  9. 由清除float原理到BFC

    关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界.普通元素不会对齐造成影响. 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决.例如 ...

随机推荐

  1. 035 控制并发 select * from test1 where id =1 for update 就会对这行加锁了？

    今天在看同事程序的时候,看到这种用法,顺便学习下. 一:理论 1.功能 这个功能是上锁. 上的是一个排它锁,也就是说,其他的事务是可以读取的.但是不能写入或者更新. 二:实践 1.创建表 2.提交一条 ...

  2. Zookeeper安装使用

    一:zookeeper介绍 Zookeeper 分布式协调组件.本质一个软件. Zookeeper常用功能 1 发布订阅功能.把zookeeper当作注册中心原因. 2 分布式/集群管理功能. 使用j ...

  3. pyqt pyside QAction 代码中触发

    pyqt pyside QAction 代码中触发 一般如果多个QAction(在同一个 QButtonGroup 中,而且是 checkable 的),不同情况下我们希望其中某个默认checked: ...

  4. Running Median POJ - 3784 （对顶堆/优先队列 | 链表）

    For this problem, you will write a program that reads in a sequence of 32-bit signed integers. After ...

  5. The more, The Better

    The more, The Better依赖背包+树形dpf[x][j+1]=max(f[x][j+1],f[x][j+1-k]+f[i->n][k]);我的一个疑问就是这k个节点会不会选重复, ...

  6. SpringMVC(二六) SpringMVC配置文件中使用mvc:view-controller标签

    在springmvc中使用mvc:view-controller标签直接将访问url和视图进行映射,而无需要通过控制器. 参考springmvc.xml内容: <?xml version=&qu ...

  7. 765. 有效的三角形.md

    描述 给出三个整数 a, b, c, 如果它们可以构成三角形,返回 true. 三角形的定义 (Wikipedia) 样例 给定 a = 2, b = 3, c = 4 返回 true 给定 a = ...

  8. 解决nuxt.js新建项目报错的问题

    查了一下nuxt的github才知道是node.js版本太低造成的,据说升级到8.6以上就可以了(本人直接升了9.9) node_modules\nuxt\lib\core\middleware\nu ...

  9. 在Node.js使用Promise的方式操作Mysql（续）

    在之后的开发中,为了做一些事务开发,我把mysql的连接代码从之前的query函数中分离出来了,直接使用原生的方法进行操作,但发现还是有点问题 原因是原生的node-mysql采用了回调函数的方式,同 ...

  10. Shell脚本笔记（三）shell中的数学计算

    shell中的数学计算 一.使用方括号 #!/bin/bash a= b= c= res=$[$a * ($c-$b)] echo $res 二.使用(()) +)) ((i=+)) b=$((-*) ...