块格式上下文

css2.1中定义

浮动,绝对定位元素,非块盒的块容器(例如,inline-blockstable-cells和table-captions)和overflow不为visible的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中,每个盒的left外边(left outer edge)挨着包含块的left边(对于从右向左的格式化,right边挨着)。即使存在浮动(尽管一个盒的行盒可能会因为浮动收缩),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)

MDN中的描述

块格式化上下文(Block Formatting ContextBFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

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

  • 根元素或包含根元素的元素
  • 浮动元素(元素的float不是none
  • 绝对定位元素(元素的positionabsolutefixed
  • 行内块元素(元素的displayinline-block
  • 表格单元格(元素的displaytable-cellHTML表格单元格默认为该值)
  • 表格标题(元素的displaytable-captionHTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别是HTML tablerowtbodytheadtfoot的默认属性)或 inline-table
  • overflow 值不为 visible的块元素
  • display 值为flow-root的元素
  • contain值为layoutcontentstrict的元素
  • 弹性元素(displayflexinline-flex元素的直接子元素)
  • 网格元素(displaygridinline-grid元素的直接子元素)
  • 多列容器(元素的 column-countcolumn-width不为auto,包括column-count1
  • column-spanall的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中

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

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

总结

BFC就是包住他的所有子元素

猜你喜欢

转载自blog.csdn.net/Helloyongwei/article/details/81186186