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

BFC(块级格式化上下文)

作者: web前端_潘哥哥 | 来源:发表于2021-02-20 11:29 被阅读0次

块级格式化上下文 是一块 独立渲染区域,他规定了在该区域中,常规流块盒的布局

  • 常规流块盒在水平方向上必须撑满包含块
  • 常规流块盒在垂直方向上依次摆放
  • 常规流块盒若上下外边距无缝相邻,上下外边距则会合并
  • 常规流块盒的自动高度和摆放位置,会无视浮动元素

不同的BFC区域,渲染时互不干扰
创建BFC的元素,隔绝了内部于外部的联系,内部的渲染不会影响到外部

具体规则:

  • 创建BFC的元素,自动高度需要计算浮动元素
  • 创建BFC的元素,边框盒不会与浮动元素重叠
  • 创建BFC的元素,不会与他的子元素进行外边距合并

如何创建BFC:

  • 根元素 (html元素)
  • 浮动元素
  • 绝对定位元素
  • overflow属性值不为visible
  • display: table

相关文章

  • css

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

  • BFC

    什么是 BFC Block Formatting Contexts(BFC):块级元素格式化上下文 BFC布局规则...

  • web前端入门到实战:CSS里的BFC和IFC的用法

    一、BFC Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 ...

  • CSS知识点----BFC

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

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

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

  • BFC / IFC

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

  • 3分钟理解BFC

    BFC的简介 BFC(Block Formatting Context) 块级格式化上下文,是用于布局块级盒子的一...

  • BFC和IFC

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

  • BFC属性

    BFC(Block formatting context)直译为"块级格式化上下文"。BFC它是指一个独立的块级渲...

  • BFC和IFC

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

网友评论

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

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