Solution to the CSS height collapse problem

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

Recommend

How to store text and pictures in MySQL

Large Text Data Types in Oracle Clob long text ty...

Blog Design Web Design Debut

The first web page I designed is as follows: I ha...

How to use javascript to do simple algorithms

Table of contents 1 Question 2 Methods 3 Experime...

Sharing of two website page translation plug-ins

TranslateThis URL: http://translateth.is Google T...

MySQL8 Installer version graphic tutorial

Installation The required documents are provided ...

Vue.js implements the code of clicking the icon to zoom in and leaving

The previous article introduced how Vue can reali...

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

Preface A few days ago, I came across the feature...

A debugging process record of Chinese garbled characters in the Tomcat source code startup console

Find the problem Today I am going to study the to...

JavaScript type detection method example tutorial

Preface JavaScript is one of the widely used lang...

VUE+Canvas implements the game of God of Wealth receiving ingots

Welcome to the previous canvas game series: 《VUE ...

Lambda expression principles and examples

Lambda Expressions Lambda expressions, also known...

MySQL briefly understands how "order by" works

For sorting, order by is a keyword we use very fr...

Mysql vertical table conversion to horizontal table method and optimization tutorial

1. Vertical table and horizontal table Vertical t...

About dynamically adding routes based on user permissions in Vue

Display different menu pages according to the use...

MySQL implements an example method of logging in without a password

Specific method: Step 1: Stop the mysql service /...