格式化上下文

作者: Mr老朝 | 来源:发表于2021-05-10 11:35 被阅读0次
.bfc {
    display:table;
    display:flex;
    overflow:hidden;
    overflow:auto;
    display:inline-block;
    display:grid;
}

对于float浮动元素后面的元素可以通过clear来消除float的浮动

.float + .noFloat {
    clear:both;
}

根元素(<html>)
浮动元素(元素的 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 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
多列容器(元素的 column-count 或 column-width (en-US) 不为 auto,包括 column-count 为 1)
column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

相关文章

  • BFC和IFC

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

  • BFC和IFC

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

  • BFC

    什么是BFC CSS规范:格式化上下文(blockformattingcontext) MDN:一个块格式化上下文...

  • CSS知识点----BFC

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

  • BFC / IFC

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

  • 块格式化上下文BFC

    一、定义 根据MDN上对块格式化上下文的描述: 块格式化上下文(Block Formatting Context,...

  • BFC IFC GFC FFC的理解

    FC:formatting context 格式化上下文。css2.1定义了 BFC 块级格式化上下文 + IFC...

  • 格式化上下文

    格式化上下文: 页面中的一块渲染区域,同一个格式化上下文内和不同格式化上下文之间的定位方式都会化生变化; 分为块级...

  • 学习BFC格式化上下文笔记

    BFC格式化上下文 块级格式化上下文(Block Fromatting Context)是按照块级盒子布局的。 B...

  • 前端面试题-BFC(边距重叠解决方案)

    1、BFC的基本概念? 块级格式化上下文。与之并列的是IFC(内联元素的格式化上下文,此处先不讨论哈)。 2、说下...

网友评论

    本文标题:格式化上下文

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