margin collapse phenomenon
When two or more vertically adjacent block elements set the outer margin at the same time, the outer margin will collapse, also known as boundary folding. If the outer margins of two adjacent elements are the same, the outer margins will completely overlap. If the outer margins of two adjacent elements are different, the browser will take the largest outer margin as the standard. Officials said it was set up to better suit the designer's taste.
Sibling element collapse
<style>
.box1 {
background-color: lightskyblue;
width: 200px;
height: 200px;
margin-bottom: 100px;
}
.box2 {
background-color: pink;
width: 200px;
height: 200px;
margin-top: 100px;
}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
Here, I set two square box1 and box2 with different colors of 200px, set the bottom margin of 100px for the box1 above, and set the top margin of 100px for the box2 below. The ideal result is that there is a total of 200px margin in the middle, but the browser only displays 100px margin in the middle. This is a kind of margin collapse.
Element margin collapse for parent and child
<style>
.box1 {
background-color: lightskyblue;
width: 300px;
height: 300px;
}
.box2 {
background-color: pink;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
Here, I set a 300 PX square for the outer box1 parent element and a 100 PX square for the inner box2 child element. There are two situations:
- If the parent element and child element have the same margin top value, and the attributes overlap, the browser will take the largest outer margin as the standard, and margin overlap will occur.
- If only the child element has the Marin top value set, and the parent element has no upper margin set, the parent element will be brought down by the outer margin of the child element.
The ideal state of the above code should be that the pink color box is 100px away from the upper edge of the lightskyblue color box, and the top of the lightskyblue color box is close to the upper boundary of the browser. Here is the second case where the elements of the parent and child collapse.
terms of settlement
BFC(Block formatting context)
Trigger an independent rendering area by setting * * BFC(Block formatting context) to be translated into "block level formatting context" * * and only block level boxes participate.
BFC can be triggered by any of the following conditions:
- The value of float is not none
- The value of overflow is not visible
- The values of display are inline block, table cell and table caption
- The value of position is absolute or fixed
The above conditions may have side effects, so select the setting with the least side effects according to the situation. The most common condition is to set overflow:hidden; Because its side effects are relatively minimal.
Demo code
Resolve sibling element collapse code
We set a new box container for the outer layer of box2 box, and add overflow:hidden in the css attribute; Or float:left; To trigger a BFC.
Modify the element code of the same level above:
<style>
.box1 {
background-color: lightskyblue;
width: 200px;
height: 200px;
margin-bottom: 100px;
}
.BFC {
/* Select any of the following attribute values to create a BFC */
overflow: hidden;
/* float:left;
display:inline-block|table-cell|table-caption;
position:absolute|fixed; */
}
.box2 {
background-color: pink;
width: 200px;
height: 200px;
margin-top: 100px;
}
</style>
<body>
<div class="box1">box1</div>
<div class="BFC">
<div class="box2">box2</div>
</div>
</body>
effect:
Resolve element margin collapse of parent and child
As above, we add a BFC triggering condition overflow:hidden to the lightskyblue box of the parent element box;
Modify the above code:
<style>
.box1 {
background-color: lightskyblue;
width: 300px;
height: 300px;
margin-top: 150px;
overflow: hidden;
}
.box2 {
background-color: pink;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
The effect is:
It should be noted here that the BFC that we add trigger conditions to the parent box will only have an effect on the child elements. If we add the BFC trigger conditions overflow:hidden; to the child box elements and pink boxes just now;, The above margin collapse effect will not be solved, as shown in the following code:
.box1 {
background-color: lightskyblue;
width: 300px;
height: 300px;
}
.box2 {
background-color: pink;
width: 100px;
height: 100px;
margin-top: 100px;
overflow: hidden;
}
The collapse effect still has:
BFC related development:
BFC is an isolated independent container on the page. The child elements in the container will not affect the external elements.
Through BFC, we can do these things:
- Adaptive two column layout
- You can prevent elements from being overwritten by floating elements
- Can contain floating elements -- clear internal floating
- When belonging to different BFC s, margin overlap can be prevented
Accommodate floating elements
The floating element will be separated from the original document flow, so when we try to wrap an element separated from the document flow with an ordinary element, it has no effect.
For example:
<style>
.box1 {
background-color: lightskyblue;
}
p{
background-color: pink;
float: left;
margin: 10px;
}
</style>
<body>
<div class="box1">
<p>This is a text!</p>
<p>This is a text!</p>
</div>
</body>
effect:
We have set light sky blue for the outer container box1, but there is no box1 color in the effect. Here, we can set a condition overflow:hidden for box1 to trigger BFC to solve this problem. Modify code: ` ` css
.box1 {
background-color: lightskyblue;
overflow: hidden;
}
p{
background-color: pink;
float: left;
margin: 10px;
} ```
Of course, this problem can also be solved by setting a float for box1 so that box1 and the font float together. However, this is not the key point. The code is as follows:
background-color: lightskyblue;
float: left; }
p{
background-color: pink;
float: left;
margin: 10px; }
The effect is:
You can also use the clear attribute to achieve the effect, but here you need to add an empty element under the p tag and modify the code:
<style>
.box1 {
background-color: lightskyblue;
}
p{
background-color: pink;
float: left;
margin: 10px;
}
.clear{
clear: both;
}
</style>
<body>
<div class="box1">
<p>This is a text!</p>
<p>This is a text!</p>
<div class="clear"></div>
</div>
</body>
The effect is the same.
Block text wrapping
When we set the float attribute to an img element, the text around the image will automatically surround it. We can set an attribute overflow:hidden; To trigger a BFC to prevent text wrapping, for example:
<style>
img{
width: 150px;
float: left;
}
p{
background-color: lightblue;
}
</style>
<body>
<img src="img/Flame male god.png">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis sint praesentium in veniam
quos delectus, voluptatem et quo ullam perferendis sit. Beatae doloremque nobis exercitationem
necessitatibus inventore mollitia,quisquam enim. Lorem ipsum dolor sit, amet consectetur dolorum!
adipisicingelit.Odio, cum totam eius autem dolore asperiores aspernatur aliquid magni harum error
libero sit omnis veritatis quibusdam culpa quod quia ea dolorum!</p>
</body>
The normal surround effect is:
We add overflow:hidden for the p element; Property to trigger BFC. The code is as follows:
img{
width: 150px;
float: left;
}
p{
background-color: lightblue;
overflow: hidden;
}
The effects are as follows:
