CSS box model
Basic concepts: Standard Model and Model + IE difference
CSS how to set these two models?
How to get JS to set box model corresponding to the width and height?
Examples of questions (overlap margin The model interpreter cartridge)
BFC margins overlapping solutions
(1) The basic concept of the BFC: block format content block-level formatting context
(2) BFC principle: that BFC rendering rules.
1, the margin in the vertical direction of this element BFC overlap occurs
2, BFC box area does not overlap with the floating element
. 3, the BFC on the page is a separate vessel outside elements do not affect the inside of the elements, which elements will not affect the outside of the element
4, calculate the height of the BFC, when the height of the float will be involved in the calculation
(3) How to create a BFC
1, create a parent element, the parent element to add overflow: hidden or overflow: auto
2, float value is not none (default is none), just set up a floating, it created a default BFC
3, as long as the value of the position is not static or relative, that is, as long as the absolute or fixed, you can create BFC
4, display: table or display: inline-block and so on display, you can create BFC
(4) BFC usage scenarios
1, if the same level of the upper and lower label margin-top and margin-bottom exist, will overlap, is highly dependent on large overlapping top and bottom values which, in this case, if margin-top margin-bottom, and at the same time exists, a parent element may be added in a div tag, div using BFC.
2, if the left float, adaptive to the right, but smaller than the height of the left to the right, in which case the following elements are embedded in the left side to the right elements, in this case the right to add an element of parent elements BFC can solve this problem.
. 3 , BFC will float even sub-elements involved in computing the height of the parent element, as long as a parent element BFC