首页 > 代码库 > BFC是什么?是清除浮动的一种方法

BFC是什么?是清除浮动的一种方法


BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。

什么时候会触发BFC呢?常见的如下:

  • float的值不为none
  • overflow的值为auto,scrollhidden
  • display的值为table-celltable-captioninline-block中的任何一个。
  • position的值不为relativestatic

BFC和float元素做相邻兄弟时候会发现,普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文。如下截图:

技术分享

BFC是什么?是清除浮动的一种方法