美文网首页
创建BFC的方法

创建BFC的方法

作者: RoyChina | 来源:发表于2019-12-11 13:19 被阅读0次

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

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none
  • 绝对定位元素(元素的 positionabsolutefixed
  • 行内块元素(元素的 displayinline-block
  • 表格单元格(元素的 displaytable-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 displaytable-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 displaytable、``table-rowtable-row-group、``table-header-group、``table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table
  • overflow 值不为 visible 的块元素
  • display 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
  • contain 值为 layoutcontentstrict 的元素
  • 弹性元素(displayflexinline-flex元素的直接子元素)
  • 网格元素(displaygridinline-grid 元素的直接子元素)
  • 多列容器(元素的 column-countcolumn-width 不为 auto,包括 ``column-count1
  • column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更Chrome bug)。

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

相关文章

  • 创建BFC的方法

    下列方式会创建块格式化上下文: 根元素或包含根元素的元素 浮动元素(元素的 float 不是 none) 绝对定位...

  • BFC(格式化上下文)

    什么是BFC? 1、BFC就是一个封闭的区域(独立的渲染区域)2、如果一个区域创建了BFC,它就会创建一个封闭的区...

  • BFC 块级格式化上下文

    BFC BFC 是一个独立的渲染区域,内部元素的渲染不会影响外界 创建 BFC float 属性不是 none p...

  • 清除浮动有哪些方式

    创建一个BFC 根据BFC的规则计算BFC的高度时,浮动元素也参与计算, 父级元素设置为overflow:hidd...

  • 前端记录 - 草稿

    创建bfc: display: flow-root; fr单位

  • 浮动/BFC

    浮动 通过浮动,我们能很方便地布局,但是也会造成各种影响. BFC 什么是BFC? 创建了 BFC的元素就是一个独...

  • 关于BFC

    BFC 块格式化上下文 创建BFC的情况(指路) BFC是盒子元素布局的区域以及浮动元素与其他元素交互的区域,是一...

  • 对BFC的理解,如何创建BFC

    先来看两个相关的概念: Box: Box 是 CSS 布局的对象和基本单位,⼀个⻚⾯是由很多个 Box 组成的,这...

  • css BFC

    1. bfc BFC(Block formatting context) 中文:块级格式化上下文 2.如何创建bf...

  • CSS 其他小点

    对BFC规范的理解? BFC,块级格式化上下文,一个创建了新的 BFC 的盒子是独立布局的,盒子里面的子元素的样式...

网友评论

      本文标题:创建BFC的方法

      本文链接:https://www.haomeiwen.com/subject/aiuogctx.html