Solution to the CSS height collapse problem

1. High degree of collapse

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 floating is set for a child element, the child element 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.
Therefore, we must avoid the problem of height collapse during development.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

Result: The height of the parent element box1 is expanded by the content of the child element box2 a.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

Result: The height of the parent element is stretched by the height of the child element, 100.

If you set float for a child element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

Result: The child element floats and the parent element has no height. The footer moves upward.

Set the height of the parent element to avoid collapse:

.box1{
        border: 10px solid red;
        height: 100px;/* Set the height of the parent element*/
    }

result:

However, when the height of the child element is high, overflow problems will occur. Once the height of the parent element is fixed, the height of the parent element will not automatically adapt to the height of the child element, so this solution is not recommended:

  .box2{
        width: 100px;
        height: 200px;
        background-color: greenyellow;
        float: left;
    }

result:

2. Solve the collapse problem

According to the W3C standard, all elements on the page have an implicit attribute called Block Formatting Context, or BFC for short. This property 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 margins of the parent element will not overlap with the child elements
(2) Elements that enable BFC will not be covered by floating elements
(3) Elements that enable BFC can contain floating sub-elements

How to enable the BFC of an element:

Set element to float

Although this method can expand the parent element, it will cause the width of the parent element to be lost. In addition, this method will also cause the lower elements to move up, which cannot solve the problem.

Sets the element to absolute positioning

There are also the above problems

Set the element to inline-block

This can solve the problem, but it will cause width loss, so it is not recommended.

Set the element's overflow to a non-visible value

Recommended method: Setting the parent element overflow to hidden is the way to enable BFC with the least side effects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
        overflow: hidden;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

result:

Note: However, BFC is not supported in IE6. So hasLayout is introduced.

In IE6, there is another implicit property called hasLayout, which has a similar function to BFC, so the IE6 browser can solve the problem by turning on hasLayout. There are many ways to enable it, but the way with the least side effects is: just set the element's zoom to 1.

Zoom means to enlarge, and it is followed by a number. The number you write means how many times the element will be enlarged.

zoom:1 means not to zoom in on the element, but hasLayout can be enabled through this style.

The zoom style is only supported in IE and not in other browsers.

zoom: 1;/* compatible with ie6*/
overflow: hidden;/* Compatible with non-IE6*/

This is the end of this article about the solution to the CSS height collapse problem. For more relevant CSS height collapse 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!

<<: Details on how to use class styles in Vue

>>: A detailed introduction to deploying RabbitMQ environment with docker