CSS之BFC

CSS之BFC

接触CSS一段时间之后，过了那段掌握基本知识的蜜月期之后开始痛苦于为什么排版老是出问题？？如何更好的排版呢？？针对这些问题，理解了BFC之后，会有一定的帮助的。

什么是BFC？BFC(block formamtting context中文翻译为块级格式化上下文)，BEC是个环境，这个环境对外表示为一个块，外界的元素对环境内的元素没有影响，相对，环境内的元素也不会受到外部环境的影响。

在CSS3中，BFC又被称为Flow Root。

BFC的形成条件：

1，设置了float;(float:none除外)，

2，overflow不为visible；(可以是hidden scroll auto等)

3，display的值为table-cell  table-caption 或inline-bock；

4,position不为static和relative中的一个（relative设置后其原来的位置还是会被占用）

BFC的作用？了解了BFC的定义以及形成原理，如何使用呢？

1，包含浮动元素。在设置CSS样式的时候，有时会出现父元素高度塌陷，这是通常是由于子元素是浮动元素造成的，解决这种问题的方式就是给父元素一个BFC环境，通过以上几条合理的设置父元素的CSS样式。

2、不被浮动元素覆盖。

3. 阻止相邻元素的 margin 折叠。