This is the fifth day of my participation in the First Challenge 2022

preface

Hello everyone, I am not eating fish d cat, the front has sorted out a fun CSS project for you, you are writing CSS whether encountered height collapse problem, is the child element float does not occupy, the parent element can not identify the height of the content, resulting in the parent element height collapse. This results in a cluttered page layout.

Height collapse problem

When the child element floats, it does not occupy space, leaving the document flow, and the parent element cannot recognize the height of the content. This is called the result of height collapse: Since the height of the parent element collapses, all elements under the parent element will move up, which will result in a chaotic page layout

Height collapse effect

If the content exceeds the height of the box, the min-height will cause the content to open the box. If the content does not exceed the height of the box, the box height is still the current value structure:

  <div class="box">
        <div class="box1">left</div>
        <div class="box2">right</div>
    </div>
Copy the code

The box on the left and the box on the right have floated out of the flow of the document. The parent element sets the minimum min-height. However, the height of the child element exceeds that of the parent element and the parent element collapses, affecting the layout of the page.

Solution for height collapse

Sets the parent elementoverflow: hidden;

The parent element sets overflow: hidden; Other attribute values of overflow are available, except unavailable: the parent element sets overflow: hidden; The BFC (which is a separate render area with its own layout rules and floating elements that also participate in height calculation) is triggered as follows: Height collapse problem resolved

Add empty boxes at the bottom

Solution: Set an empty box at the minimum of all floating elements, clear the float, and spread the parent element apart. Visualization can be understood as a stepping stone for floating child elements.

<div class="box ">
        <div class="box1">left</div>
        <div class="box2">right</div>
        <div class="clear"></div>
    </div>
Copy the code

Properties:

 .clear {
            height: 0px;// The height is 0, which does not affect other heights
            clear: both;// Clear the float
        }
Copy the code

The results are as follows: The height collapse problem is solved

Universal elimination

The principle of universal cleanup is similar to that of the second method, which is to add an empty box as a ‘stepping stone’, but universal cleanup uses a pseudo-object selector. Dynamic simulation of empty boxes, where needed, where to add. Note: Always use with Content, whether or not you write content.

// Add an empty box to clear-fix, so add a selector to clear-fix where it is needed.
 .clear-fix::after {
            content: "";// The pseudo-class element content is empty
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
Copy the code

Usage:

  <div class="box clear-fix ">
        <div class="box1">left</div>
        <div class="box2">right</div>
    </div>
Copy the code

The results are as follows: The height collapse problem is solved

conclusion

Universal cleaning method recommended use, best use, compatibility is also strong. Add it wherever you need it. It’s convenient. If you don’t use it, just throw it in the stylesheet.