“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Floating problems: height collapse!

Do not set floating, a parent box wrapped in more than one child box, to the children box set floating, the parent box will not be wrapped in the child box!

Cause analysis of height collapse problem: when the parent box does not set the width and height, its width and height is supported by the child box, but if the child box is set to float, then the child box is out of the normal document flow, then there is a problem, what about the width and height of the parent box?

First: There is no problem when the subbox is not set to float:

Second: float all sub boxes, high collapse!

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Floating problems: height collapse</title>

    <style>
        div div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left;
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>
Copy the code

(1) Three methods to solve height collapse:

1. Parent element Settings (beyond partial hiding)

2. Set an empty div

The three methods have the same effect:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three ways to deal with high collapse</title>

    <style>
        div div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left;
            background-color: blue;
        }
        /* First method: parent element setting (beyond partial hiding) */
        #div4{
            overflow: hidden;
        }

    </style>
</head>

<body>

<div id="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <! An empty div can hold the width and height of the parent box.
    <div id="div5"></div>
</div>

</body>
</html>
Copy the code

3. Using pseudo-elements:

With the second method similar, but not the same writing method!! A pseudo-element is an element that does not exist in the web page, but can be used as an element

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"</ style> div div{width: 100px; height: 100px; border: 1px solid red; }#div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left; background-color: blue; } /* Third method: use false elements note: this is for the parent box! * /#div4:after{
            content: ""; /* Must set an empty content */ display: block; Clear :both; clear:both; clear:both; /* Clear left float */} </style> </head> <body> <divid="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>
Copy the code

Summary of three solutions to high collapse:

  1. The parent element sets overflow:hidden;
  2. Add an empty div; If your page has a lot of floating layouts, add lots of empty divs, which is not recommended.
  3. Using pseudo-elements is recommended, and defining public classes is recommended to reduce CSS code.

🔆 In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!