Shulou(Shulou.com)06/03 Report--

This article mainly explains the "method to solve the outer margin margin overlay tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "to solve the outer margin margin overlay method tutorial" it!

First of all, you need to know under what circumstances will trigger: margin in the vertical direction of block elements in two or more adjacent ordinary streams will collapse

1. Two or more

It shows that the number must be greater than one, and that folding is the mutual behavior between elements, there is no An and B folding, and B does not fold with A.

two。 Adjoining

It means that it is not separated by non-empty content, padding, border, or clear, indicating its location relationship.

Note that without being separated, 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 flow; only if the height of an element is "auto" will its margin-bottom be adjacent to the margin-bottom of the last child element (non-floating element, etc.) in its normal flow.

3. Vertical direction

Refers to the specific orientation, only the vertical direction of the margin will fold, that is, the horizontal direction of the margin will not fold the phenomenon.

Second, so how to make the element up and down the margin does not collapse?

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

two。 An element that creates a block-level formatting context without margin folding with its child elements (note that the element that created the BFC and its child elements will not collapse)

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

Obviously, you can see that the reason why the adjacent elements do not collapse is the subset of the trigger BFC factor, that is, if I set overflow:hidden for the upper and lower adjacent elements, although the BFC is triggered, the upper and lower margin of the upper and lower elements will still collapse.

In fact, this problem does not have much to do with BFC, I hope you do not abuse BFC, you know that BFC is not omnipotent, the original purpose of creating BFC is only to allow the element itself (including its child elements) to correctly calculate their own width and height.

The triggers that do not collapse are floating elements, inline-block elements, and absolute positioning elements, which are only a subset of the factors that create BFC, but it does not mean that elements that create BFC will not collapse, because BFC can also be created with overflow:hidden. Conversely, if the parent element triggers the BFC, its block-level child elements will collapse instead.

The last zoom mentioned by Ke Jun, which was originally supported by IE browsers, is now supported only by the latest webkit core browsers. However, hasLayout can only be triggered successfully under browsers below IE8, and it has no effect on non-IE browsers, so you still need to create BFC in the same way.

On how to solve this problem in the end, my advice is to try to use margin in the same direction when writing, such as setting it to top or bottom, because you sometimes don't need to set float, inline-block or absolute for each element in practice.

Thank you for your reading, the above is the content of the "method tutorial for solving external margin margin overlay". After the study of this article, I believe you have a deeper understanding of solving the problem of external margin margin overlay method tutorial, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.