A brief discussion on CSS height collapse problem

Performance

For example:

HTML:

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
</div>
<div class="second">
    second
</div>
<div class="third">
    third
</div>

CSS:

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}

It manifests as:

Causes

As can be seen from the above example, the first box has no height set and is stretched by the child elements. However, since the child box is set to float and is out of the standard flow, the first box has no height, which means that the second and third boxes move upward.

The reasons for the high collapse can be concluded as follows:

In the document flow, the height of the parent element is extended by the child element by default, that is, the height of the parent element is the same as the height of the child element. However, when the child element is set to float, it will be completely out of the document flow. At this time, the child element will not be able to support the height of the parent element, causing the height of the parent element to collapse. Since the height of the parent element collapses, all elements under the parent element will move upward, which will cause a chaotic page layout.

Solutions for high collapse:

1. Set a fixed height for the parent element. However, after using this method, the height of the parent element cannot be automatically increased according to the child element. You can use this method according to the characteristics of your own page if the height can be fixed. Otherwise, this method is not recommended.

2. Extra tag method: This is the solution recommended by W3C, but it is not recommended because the principle of HTML is to write semantic tags. This method will add meaningless tags.

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
    <div style="clear: both;"></div>
</div>

3. Overflow property of the parent element (open the BFC of the element):

.clearfix{
    overflow: hidden;
}

Using this method, the attribute value can be any non-visible (hidden/auto/scroll), but hidden is recommended.

This method has fewer side effects. This method is not supported in IE6. You can add zoom: 1;

.clearfix::after{
    content: "";/*The pseudo element content is empty*/
    display: block;/*Non-default is fine, it can also be table, etc.*/
    height: 0;/*The height of the pseudo element is 0 and does not affect other elements*/
    clear: both;/*clear float*/
    visibility: hidden;/*Invisible*/
}
.clearfix{
    zoom: 1;/*IE6 elements do not have BFC mode, but this code will turn on the hasLayout mode in IE6, which is only supported in IE*/
}

4. Clear the float after the single pseudo element (turn on the BFC of the element):

.clearfix::after{
    content: "";/*The pseudo element content is empty*/
    display: block;/*Non-default is fine, it can also be table, etc.*/
    height: 0;/*The height of the pseudo element is 0 and does not affect other elements*/
    clear: both;/*clear float*/
    visibility: hidden;/*Invisible*/
}
.clearfix{
    zoom: 1;/*IE6 elements do not have BFC mode, but this code will turn on the hasLayout mode in IE6, which is only supported in IE*/
}

This method is now widely used. Many large websites use this method. It has fewer side effects and only needs to be processed with IE6.

5. Double pseudo-elements clear floating (open element's BFC):

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*IE6 elements do not have BFC mode, but this code will turn on the hasLayout mode in IE6, which is only supported in IE*/
}

This approach is more cumbersome to write and is not recommended.

The effect after clearing the influence of floating on the parent element:

BFC related

According to the W3C standard, each element in the page has an implicit attribute called Block Formatting Context, or BFC for short. This attribute can be set to on or off, and is off by default.

When the BFC of an element is turned on, the element will have the following characteristics:

1. The vertical margin of the parent element will not overlap with the child element

2. Elements with BFC enabled will not be covered by floating elements

3. Elements with BFC enabled can contain floating sub-elements

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.