1. Margin folding
According to the BFC layout rules, “the spacing of boxes in the vertical direction is determined by the margin attribute, but the margin of two adjacent boxes of the same BFC will appear margin folding phenomenon”.
(1) the. Div1 margin-top appears in the. Root layer; Margin-buttom for.div1 and margin-top for.div2 generate margin folding.
<body> <div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow;" > <div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;" ></div> <div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div> </div> </body>Copy the code
(2) Solution: make.root form BFC; Wrap.div2 with a new div and trigger the div element to form a BFC so that the tags.div1 and.div2 no longer belong to the same BFC.
<body> <div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;" > <div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;" ></div> <div style="overflow: hidden;" > <div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div> </div> </div> </body>Copy the code
On the other hand, if a.div2 outer div has a margin attribute of its own (although this is not very common, just for testing), this does not affect the inner part of the div, but will cause margin folding with its.div1 counterpart.
<body> <div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;" > <div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;" ></div> <div style="overflow: hidden; margin: 30px;" > <div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div> </div> </div> </body>Copy the code
If you don’t have to stick to margin, you can use padding instead without causing folding problems. If you want to solve the problem on the original basis, you can refer to the above div layer and make it form BFC.
<body> <div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;" > <div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;" ></div> <div style="overflow: hidden;" > <div style="overflow: hidden; margin: 30px;" > <div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div> </div> </div> </div> </body>Copy the code
2. “Height collapse” phenomenon
The height of.root follows the height of.div2 with 80px. This is because the height of the floating element.div1 does not participate in the height calculation of the parent element, but has a height value of its own.
<body> <div class="root" style="width: 400px; position: relative; background-color: crimson"> <div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;" ></div> <div class="div2" style="height: 80px; background-color: coral"></div> </div> </body>Copy the code
(2) If.div1 and.div2 are floating elements, “height collapse” will occur. The height of.root is 0px, as shown in the figure. (Note: When setting.div2 to float to the right, add the setting width.)
<body> <div class="root" style="width: 400px; position: relative; background-color: crimson"> <div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;" ></div> <div class="div2" style="width: 320px; height: 80px; float: right; background-color: coral"></div> </div> </body>Copy the code
(3) This problem can be solved by making.root form a BFC. This is according to the BFC rule, “the height of the floating element also participates in the height calculation of the BFC”, in which case the maximum height of the.root element is 150px.
<body> <div class="root" style="width: 400px; position: relative; background-color: crimson; overflow: hidden;" > <div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;" ></div> <div class="div2" style="width: 320px; height: 80px; float: right; background-color: coral"></div> </div> </body>Copy the code