How to solve the problem of margin overlay and the problem of margin

[Switch] how to solve the problem of margin overlay and explore the problem of margin
The block elements in two or more adjacent normal streams are collapsed in the vertical direction. So how can we make the elements not fold up and down the margin? The following method may be helpful to you.I. First, you need to know under what circumstances will trigger: Margin in the vertical direction of block elements in two or more adjacent normal streams is folded.

1. Two or more
It indicates that the number of elements must be greater than one, indicating that folding is the mutual behavior between elements. There is no folding between A and B, and B is not folding with.

2. Adjacent
It refers to the positional relationship that is not separated by non-empty content, padding, border, or clear.
Note that, without separation, the margin-top of an element will be adjacent to the margin-top of the first child element (non-floating element, etc.) in its normal stream; only when the height of an element is "auto", its margin-bottom will be the last child element (non-floating element, etc.) in its normal stream) adjacent to margin-bottom.

3. Vertical
It refers to the specific position. Only margin in the vertical direction is folded. That is to say, margin in the horizontal direction is not folded.

2. How can we prevent the elements from being folded up and down margin? 

1. The margin of floating elements, inline-block elements, and absolute positioning elements will not fold the margin of other elements in the vertical direction (note that this refers to the upper and lower adjacent elements)

2. the element that creates a block-level formatting context does not fold its child elements with margin (note that the element that creates BFC and its child elements do not fold here)

We all know that the factors that trigger BFC are float (except none), overflow (except visible), and display (table-cell/table-caption/inline-block), position (except static/relative)

Obviously, we can see that the non-folding factor of adjacent elements is the subset that triggers the BFC factor. That is to say, if I set overflow: hidden for the upper and lower adjacent elements, although BFC is triggered, however, the upper and lower margin of the upper and lower elements will still be folded.

This problem does not actually have much to do with BFC. I hope you do not abuse BFC. You must know that BFC is not omnipotent. The original intention of creating BFC is to make the element itself (including its sub-elements) you can calculate your own width and height correctly. Http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

Trigger factors that do not collapse are floating elements, inline-block elements, and absolute positioning elements. This is only a subset of BFC factors, however, it does not mean that the elements created with BFC will not be folded, because BFC can also be created with overflow: hidden. On the contrary, if the parent element triggers BFC, its block-level child element instead folds.

Here I wrote a DEMO to illustrate this problem: the http://whycss.com/demo/collspan_demo.html creates BFC three cases are mentioned, the result is that the sub-element upper and lower margin will collapse.

Ke Jun mentioned the last zoom, which was initially supported by IE, and is now supported only by the latest webkit core browser. However, hasLayout can be successfully triggered only in browsers earlier than IE8, Which is ineffective for non-ie browsers. Therefore, you still need to create BFC in the same way. For more information about hasLayout and BFC, see my blog article http://www.smallni.com /? P = 174

As for how to solve this problem in the end, I suggest using margin in the same direction when writing, for example, setting it to top or bottom, in practice, you sometimes do not need to set float, inline-block, or absolute for each element.