What is BFC
BFC what is not important. Why is it important to open? And how to turn it
The W3C standards, the page elements in a property called implicit Block Formatting Context (environment block level format) referred BFC
After opening BFC element, the element will have the following characteristics:
1. Vertical outside from the parent element and the child elements will not overlap.
2. Open BFC elements not covered by the floating element.
3. Open the BFC element may contain sub-elements floating.
In the following cases, it will automatically open BFC:
1. Set the floating elements ( in this method, although the parent element may be stretched, but will result in the loss of the width of the parent element, the element will lead to shift the bottom )
2. Set the element absolute positioning
3. Set elements display: inline-block; ( Although this method can solve the problem, but into line within a block can lead to loss of width and therefore do not recommend this method )
4. The overflow element is set to a value of non-visible ( recommended way: overflow: hidden; minimal side effects is open BFC mode )
NOTE: ie6 the BFC is not supported, if you want to add a compatible ie6 property can zoom: 1; to (Zoom an enlarged, writing is enlarged several times, this property is only supported IEs, and less IE8 )