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

块格式化上下文BFC

作者: C脖子 | 来源:发表于2018-04-26 16:47 被阅读19次

一、定义

根据MDN上对块格式化上下文的描述:

块格式化上下文(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,即使该元素没有包裹在一个多列容器中

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

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

上面的描述blabla说了一堆,让人看起来云里雾里的。接下来通过几个例子来看它的特性/功能

二、BFC元素的特性

会触发BFC的情况有,常见的有以下几个:

  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block, table-caption, table-cell中的一个
  • position的值不为staticrelative
  • display的值为flow-root

BFC 的功能主要有这么两个:

功能一:爸爸管儿子

创建了BFC的元素会包含住其中的所有内容,包裹浮动元素,因此可以起到类似于清除浮动的效果。
举例

<div class="container">
    text
    <div class="child"></div>
</div>
.container {
  background: #ccc;
  border: 5px solid red;
}
.child {
  width:300px;
  height: 100px;
  background: green;
  float: left;
}

这样的话父元素的高度塌陷


对父元素使用overflow: hidden之后,父元素就包住了其中的浮动元素。

.container {
  background: #ccc;
  border: 5px solid red;
  overflow: hidden;
}
.child {
  width:300px;
  height: 100px;
  background: green;
  /* position: absolute; */
  float: left;
  top: 0;
}

同样也可以BFC也可以阻止父元素与其第一个或最后一个子元素之间的外边距合并。
也就是 里面的出不去

功能二:与兄弟元素划清界限

当一个块级元素与另一个浮动元素是兄弟的时候,会产生图片环绕文字的效果。
举例

<div class="float-left"></div>
  <div class="content">
    Some text.
</div>
.content {
  background: #ccc;
  border: 5px solid red;
}
.float-left {
  width:100px;
  height: 100px;
  margin: 5px;
  background: green;
  float: left;
}
QQ拼音截图20180426162929.png

相关文章

  • 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/zgfmlftx.html