5 solutions to CSS box collapse

First, what is box collapse?

Elements that should be inside the parent box are outside.

Second, why does the box collapse?

When the parent element is not set to a sufficient size and the child element is set to float, the child element will jump out of the parent element's boundary (out of the document flow), especially when the parent element's height is auto and there are no other non-floating visible elements in the parent element, the parent box's height will collapse directly to zero. We call this CSS height collapse.

In the following figure, the boxes of the two child elements at the bottom are set to float left and right respectively, and the long box at the top collapses.

ex:

3. Several solutions to box collapse

The simplest, most direct and crude method is to hard-code the box size, set a fixed width and height for each box until it is suitable. The advantage of this method is that it is simple and convenient, has good compatibility, and is suitable for layouts that only change a small amount of content and do not involve box layout. The disadvantage is that it is non-adaptive, and the browser window size directly affects the user experience.

Add floats to the outer parent box to separate it from the standard document flow. This method is convenient, but it is not very friendly to the page layout and is difficult to maintain.

Add the overflow property to the parent box.

1. overflow:auto; may cause scroll bars to appear, affecting the appearance.
2. overflow:hidden; may cause the content to be invisible.

Introduce a clearing float at the bottom of the parent box. The simplest ones are:

<br style="clear:both;"/>

Many people solve this problem, but we do not recommend it because it introduces unnecessary redundant elements.

The after pseudo-class clears the float.

The after pseudo-element of the outer box sets the clear property.

#parent:after{
                clear: both;
                content: "";
                width: 0;
                height: 0;
                display: block;
                visibility: hidden;
            }

This is a pure CSS method to solve the box collapse caused by floating. It does not introduce any redundant elements. This method is recommended to solve CSS box collapse.

Note: Although the fifth method is good, it is not compatible with lower versions of IE. The specific solution to choose can be decided based on the actual situation.

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.