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)