Block-level formatting context (block formatting contexts)

So how do you trigger BFC?

• Float value other than none
• Overflow values other than visible (Hidden,auto,scroll)
• Display (Table-cell,table-caption,inline-block)
• Position (absolute,fixed)
• FieldSet elements

Features of the BFC:

1) block level formatting context blocks margin overlays

When two adjacent block boxes are in the same block-level formatting context, the vertical margin between them will overlap. In other words, if the two adjacent block boxes do not belong to the same block-level formatting context, their margins are not superimposed.

2) block-level formatting contexts do not overlap floating elements

As a rule, the bounding rectangle of a block-level formatting context cannot overlap the margins of the elements inside it. This means that the browser will create an implicit margin for the block-level formatting context to prevent it from overlapping the margin of the floating element. For this reason, it will not work when you add a negative margin to a block-level formatting context that is next to floating (WebKit and IE6 have a problem at this point-you can see this test case).

3) block-level formatting contexts can often contain floating

See: css2.1-10.6.7 ' Auto ' Heights for block formatting context roots

In layman's terms: the element that created the BFC is a separate box in which the child elements do not affect the outside elements on the layout, and vice versa, while BFC still belong to the normal flow in the document.

Excerpt from: http://www.iyunlu.com/view/css-xhtml/55.html

Block-level formatting context (block formatting contexts)