[Transfer] Discussion on how to solve the problem of margin overlay_html/css_WEB-ITnose

The vertical margins of two or more adjacent block elements in normal flow will collapse. So how to prevent the upper and lower margins of the elements from collapsing? The following method may be helpful to everyone

1. First, you need to know the circumstances under which will be triggered: two or more adjacent block elements in the normal flow in the vertical direction Margin will fold

1. Two or more
indicates that the number must be greater than one. It also indicates that folding is a mutual behavior between elements. There is no folding of A and B, and there is no sum of B. A folding phenomenon.

2. Adjacent
means not separated by non-empty content, padding, border or clear, indicating their positional relationship.
Note that if they are not separated, the margin-top of an element will be adjacent to the margin-top of its first child element (non-floating element, etc.) in the ordinary flow; only in one When the element's height is "auto", its margin-bottom will be adjacent to the margin-bottom of its last child element (non-floating element, etc.) in the normal flow.

3. The vertical direction
refers to the specific direction. Only the vertical margin will be folded. That is to say, the horizontal margin will not be folded.

2. How to prevent the upper and lower margins of elements from collapsing?

1. The margins of floating elements, inline-block elements, and absolutely positioned elements will not collapse with the margins of other elements in the vertical direction (note that this refers to the upper and lower adjacent elements)

2. The element that has created a block-level formatting context will not be margin-folded with its child elements (note that this refers to the element that has created a BFC and its child elements will not be folded)

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

Very Obviously, you can see that the factors that prevent adjacent elements from folding are a subset of the factors that trigger BFC. That is to say, if I set overflow:hidden for the upper and lower adjacent elements, although BFC is triggered, the upper and lower margins of the upper and lower elements are still Folding will occur

This problem actually has nothing to do with BFC. I hope you will not abuse BFC. You must know that BFC is not omnipotent. The original intention of creating BFC is just to allow the element itself (including its sub-elements) to Calculate your width and height correctly. http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

The trigger factors for not folding are floating elements, inline-block elements, and absolute positioning Element, this is only a subset of the factors that create BFC, but it does not mean that the element that creates 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 elements will collapse instead.

Here I wrote a DEMO to illustrate this problem: http://whycss.com/demo/collspan_demo.html The three situations of creating BFC are mentioned. The result is that the upper and lower margins of the child elements will collapse. .

The last zoom mentioned by Ke Jun is the zoom attribute originally supported by IE browser. Until now, only the latest webkit core browsers also support it. However, hasLayout can only be successfully triggered in browsers below IE8. It has no effect on non-IE browsers, so you still need to create the BFC in the same way. For an introduction to hasLayout and BFC, please see the article on my blog http://www.smallni.com/?p=174

Regarding how to ultimately solve such a problem, my suggestion is to try to use Margins in the same direction, for example, are set to top or bottom, because in practice you sometimes do not need to set float, inline-block or absolute for each element.