HTML BFC的理解与作用

HTML BFC的理解与作用

含义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。理解来说：就是一个块级元素参与的独立块级渲染区域

一、如何创建一个BFC、形成BFC必须具备的条件

1、具备以下其一即可形成BFC

​ 1、float 不为 none

​ 2、position值为 absolute、fixed

​ 3、display 为 inline-block、table-cells、flex、block、table-caption

​ 4、overflow不为visible、clip的块元素

​ 5、body 根元素

2、以上形成BFC最好的办法

​ overflow：hidden

​ 因为不影响整体布局

二、BFC作用

1、独立性避免了margin塌陷（解决外边距合并问题）

2、阻止浮动元素覆盖

3、解决子元素浮动时、父元素高度塌陷问题