Detailed explanation of CSS margin overlap and solution exploration

I recently reviewed some CSS-related knowledge points and sorted out and summarized the classic margin overlap problems in CSS. The purpose is to test the review effect and hope to be helpful to others. If there are any omissions, I would like to ask the front-end veterans to give me advice.

Question: When using CSS layout, you will find that the upper and lower margins set by sibling or parent-child nodes will overlap, as shown in the following figure

    <style>
        .out {
            width: 100%;
            background-color: pink;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

When we check the height of the entire section, it should actually be 345px, but due to the overlap of the parent and child and sibling margins, we find that the height is 320px. So how to solve this problem in practical applications?
Creating a BFC (full block formatting context) can solve this problem. First, let’s clarify the principle of BFC.

The elements inside the BFC do not affect the external elements, and it is a relatively independent closed area;
There will be no vertical margin overlap between adjacent BFCs. In other words, if you want the element margins not to overlap, you need to create a BFC area.
The BFC area will not overlap with the box of the floating element;
When calculating the height of the BFC, floating elements are also taken into account;
How to create a Block Formatting Context?
1. Set the overflow property not to visible;
2. float is not none;
3. The value of position is not static or relative;
4. When the display attribute is table;

    <style>
        .out {
            width: 100%;
            background-color: pink;
            overflow: hidden;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
            /* overflow: hidden; */
            float: left;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

When we check the height of the section again, we find that the height has returned to 345px, which also proves that when the BFC calculates the height, the height of the floating child elements is also taken into account;

This is the end of this article about detailed explanation of CSS margin overlap and solution exploration. For more relevant CSS margin overlap content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!