Detailed explanation of four solutions to floating problems in CSS layout

1. Cause:

The effect after the subbox is set to float:

It can be seen that after the blue box is set to float, it cannot support the height of the parent box because it is out of the standard document flow, causing高度塌陷. If this problem occurs on a web page, it will cause the layout of our entire web page to become disordered.

2. Solution:

Parent box sets fixed height ------------------Add a fixed height to the parent element
Inner wall method-------------------------------Add an empty div after the parent element and add the style to clear:both
Pseudo-element clearing method ----------------- Add a class called clearfix to the parent element class name (recommended)
overflow:hidden---------------------Add overflow:hidden to the parent element style

(1) Set the parent box to a fixed height

Although setting a fixed height for the parent box can temporarily solve our problem, it is not flexible. If the height requirements of the child box change in the future (in many places on the web page), we will have to manually change the height of the parent box. It is not easy to maintain later.

Application: Fixed height area of boxes in web pages, such as fixed navigation bars.

Disadvantages: inflexible to use and difficult to maintain later

(2) Internal wall method

Add an empty block-level element (usually a div) after the floating element, and set clear:both； attribute on the element. The clear attribute literally means clear, so both means clearing the influence of floating elements on my left and right sides.

The code is as follows:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Floating elements are destructive</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">Son</div>
            <div class="clearfix"></div>
        </div>
    </body>
    </html>

Application: There are not many applications on the web page, just to guide the next way to clear the floating.

Disadvantages: Structural redundancy

(3) Pseudo-element removal method

The inner wall method is to add an empty block-level element (usually a div) after the floating element, and set clear:both； attribute on the element.

Well, there happens to be a selector in the CSS3 attribute usage that completely meets this usage, the pseudo-element selector. It's like a pseudo-class, in that pseudo-elements have added selectors, but instead of describing a special state, allow styling certain parts of an element.

It means adding styles at the end of the p tag element, which also conforms to the usage of the inner wall method.

The code is as follows:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Floating elements are destructive</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .cleafix:after{
                content:'.';
                display: block;
                clear: both;
                overflow: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="father clearfix">
            <div class="child">Son</div>
        </div>
    </body>
    </html>

When you need to clear the float in the future, you only need to add a "clearfix" class to the tag. It is very convenient and quick!

Explanation of the pseudo-element removal method:

.clearfix:after{
        content:''; means adding a content to the .clearfix element, and the content is an inline element.
        display: block; sets the element to a block-level element, which complies with the requirements of the interior wall law. (table is used in some places because table is also a block-level element)
        clear: both; Method to clear floats. You must write overflow: hidden; If you use display:none;, then the element cannot be a block-level element. overflow:hidden; means a hidden element, but the element takes up space; while display:none; does not take up space.
        height: 0;
    }

Here is the difference between :after (pseudo-class) and ::after (pseudo-element)

Similarities

Both can be used to represent pseudo-class objects and to set the content before the object.
:before and ::before are equivalent; :after and ::after are equivalent, they are just different versions

Differences

:before/:after is the writing method of CSS2, ::before/::after is the writing method of CSS3
:before/:after is more compatible than ::before/::after.
However, it is recommended to use ::before/::after in H5 development.

Notice

These pseudo-elements should be used with the content attribute
These pseudo-elements do not appear in the DOM, so they cannot be manipulated by js. They are only added to the CSS rendering layer.
These pseudo-element effects are usually activated using the :hover pseudo-class style.

(4) overflow: hidden

The overflow CSS property defines what to do when an element's content is too large to fit in its box. It is a shorthand property for overflow-x and overflow-y.

The overflow property can not only achieve the above effects, but also when an element is set with overflow:hidden|auto|scroll properties, it will form a BFC area, which we call塊級格式化上下文.

BFC is just a rule. It is important for floating positioning. Float positioning and clearing floats only apply to elements in the same BFC.

Floating will not affect the layout of elements in other BFCs, while clearing floats can only clear the floats of elements in front of it in the same BFC.

Advantages: concise code

Disadvantages: When the content increases, it is easy to cause the content to be hidden due to the failure of automatic line wrapping, and the overflowing elements cannot be displayed.

Summary: As long as we let the parent box form the area of the BFC, it will automatically clear the influence of floating elements in the area.

Which will form the BFC area:

This concludes this article on four solutions to floating issues in CSS layout. For more relevant CSS layout floating content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the idea of MySQL trigger detecting a statement in real time for backup and deletion

>>: Detailed explanation of Javascript event capture and bubbling methods