美文网首页
块格式化上下文BFC

块格式化上下文BFC

作者: ChooAcc | 来源:发表于2020-05-18 13:23 被阅读0次

一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建:
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素,
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文,即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

BFC

相关文章

  • CSS知识点----BFC

    BFC(块级格式化上下文) 块格式化上下文(Block Formatting Context,BFC) 是Web页...

  • BFC / IFC

    BFC(Block Formatting Context)块级格式化上下文 定义:一个块格式化上下文 ( BFC ...

  • BFC和IFC

    BFC 块级格式化上下文 哪些元素会生产BFC? IFC 行内格式化上下文

  • BFC和IFC

    BFC 块级格式化上下文 IFC 行内格式化上下文

  • css-BFC

    BFC(block formatting context):块格式化上下文 理解BFC BFC和堆叠上下文都没有定...

  • BEM 和 BFC

    BFC 1 定义: BFC - Block Formatting Context 块级格式化上下文 BFC的定义,...

  • BFC

    什么是BFC BFC 即 Block Formatting Contexts (块级格式化上下文) 具有 BFC ...

  • CSS清除浮动的方法

    BFC CSS中的BFC BFC:block formatting context块级格式化上下文; BFC 与清...

  • CSS中的BFC及其作用

    BFC是什么BFC 全称为 块格式化上下文 (Block Formatting Context) ,BFC是一个块...

  • css

    描述BFC(块格式化上下文)及其工作原理。 BFC 即 Block Formatting Contexts (块级...

网友评论

      本文标题:块格式化上下文BFC

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