Four solutions to floating problem in CSS layout

Time:2020-11-25

1、 Cause:

Effect after sub box setting floating:

It can be seen that after the blue box is set to float, it can not support the height of the parent box because it is separated from the standard document flow, resulting in the parent boxHigh collapse 。 If there is such a problem in the web page, it will lead to the layout disorder of our whole web page

2、 Solution:

  • Set fixed height of parent box — add fixed height to parent element
  • Interior wall method: add an empty div after the parent element, and add the style as clear:both
  • Pseudo element cleaning method: add a class called Clearfix to the parent element class name (recommended)
  • overflow:hidden——————— Add to parent element style overflow:hidden

(1) The parent box sets the fixed height

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

Application: fixed height area of box in web page, such as fixed navigation bar.

Disadvantages: it is not flexible to use and difficult to maintain in the later stage

(2) Interior wall method

Add an empty block level element (usually DIV) after the floating element, and set theclear:both;Property. The clear attribute literally means to clear. Then both means to clear the effect of floating elements on my left and right sides.

The code is as follows:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        < title > destructiveness of floating elements
        <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 in the web page, just to guide the next way to clear the floating.

Disadvantages: structural redundancy

(3) Removal of pseudo elements

The inner wall method is to add an empty block level element (usually DIV) after the floating element, and this element is setclear:both;Property.

So it happens that in the attribute usage of CSS3, there is a selector that completely conforms to this usage, pseudo element selector. Like pseudo classes, it lets pseudo elements add selectors, but does not describe special states, allowing styles to be set for certain parts of an element.

 

Indicates that the style is added to the last side of the p-tag element, which is also in line with the interior wall method.

The code is as follows:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        < title > destructiveness of floating elements
        <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 floating in the future, just add a “Clearfix” class in the label, which is very convenient and fast!

The content of the pseudo element elimination method is explained as follows:

.clearfix:after{
        Content: '"; means to add the last content inside the. Clearfix element, which is an in line element.
        Display: block; set the element as a block level element, which meets the requirements of the internal wall method. (some places use table, because table is also a block level element)
        Clear: both; the method to clear floats. It has to be written
        Overflow: hidden; if you use display:none; Then the element cannot be satisfied that it is a block level element. overflow:hidden; Indicates a hidden element, but the element takes place; and display:none; No space.
        height: 0;
    }

Here’s the difference between: after and:: after

Similarities

  • Can be used to represent pseudo class objects, used to set the content before the object
  • : before and:: before are equivalent; after and:: after are equivalent, but the versions are different
     

difference

  • : before /: after is the writing method of CSS2,:: before /:: after is the writing method of CSS3
  • : before /: after is better than: before /: after,
  • However, it is better to use:: before /:: after in H5 development
     

be careful

  • These pseudo elements should be used with the content attribute
  • These pseudo elements will not appear in the DOM, so they can not be operated through JS. They are only added in the CSS render layer
  • The effects of these pseudo elements are usually activated using: hover pseudo class style

(4)overflow:hidden

The CSS property overflow defines what to do when the content of an element is too large to fit into the box. It is an abbreviated property of overflow-x and overflow-y

The overflow property can not only achieve the above effect, then when an element is set overflow:hidden |After the auto | scroll attribute, it will form a BFC area, which we call “BFC area”Block Formatting Contexts

BFC is just a rule. It’s important for floating positioning. Floating and floating positioning are applied to the same element only.

Floating does not affect the layout of elements in other BFC, and clearing floating can only clear the floating of elements in front of it in the same BFC.

Advantages: concise code

Disadvantages: when the content increases, it is easy to cause that the line will not wrap automatically, and the content will be hidden, and the elements to overflow cannot be displayed

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

What will form BFC areas

This article on the detailed explanation of CSS layout floating problem in the four solutions to this, more related CSS layout floating content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!