【CSS】Five ways to clear float

Clearing the floating is a matter of infinite merit. 23333 Here is a record of the various ways to clear the floating.

*To be clear first, why do you want to clear the float?

A affects the positioning of other elements

The height of the parent box is 0, the child boxes are all floating and positioned, the child box will not open the parent box, and the following elements will go to the bottom of the child box

B The background image or color cannot be displayed normally

Due to the floating, if the CSS background color or CSS background image is set to the parent, the parent cannot be stretched, so the CSS background cannot be displayed.

C margin padding settings are affected

Due to floating, the padding margin set between the parent and child boxes cannot be expressed normally, especially the padding margin up and down.

1 Define the height of the parent box

Principle: Manually define the height of the parent div, which solves the problem that the parent box cannot automatically obtain the height, simple and effective code is less

Disadvantage: Only suitable for fixed-height layouts.

2 Add an empty div tag clear:both at the end

Principle: Add an empty div element after the floating element, use the clear:both provided by CSS to clear the floating, and let the parent box automatically obtain the height.

Disadvantages: If the page floats a lot, it is necessary to write n empty tags, which will disturb the code.

3 **Best Partner** Use pseudo-class parent boxes: after and zoom

 1         .clearFlo:after{
 2             content: '';
 3             height: 0;
 4             display: block;
 5             visibility: hidden;
 6             line-height: 0;
 7             clear: both;
 8         }
 9 
10         .clearFlo{
11             zoom: 1;
12         }

Principle: IE8+ support, the principle of :after is similar to method 2, zoom is a proprietary property of IE, which can solve the 6/7 floating problem, so this is a better solution, it is recommended to use public thunder to reduce css code

4 The parent box defines overflow:hidden

Disadvantages: The part beyond the box will be hidden, which is not recommended.

5 Double pseudo-element method

        .clearfix:before, .clearfix:after{
            content: ' ';
            display: table;
        }

        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

Principle: Add the invisible content block of display:table after the floating element through the :after pseudo-class, and set clear:both to it to clear the floating.

Summarize:

The first method: simple and easy to master, but only suitable for fixed-height layouts, it is not recommended to use it.

The second method: simple and well supported by browsers, but if there are many floating layouts on the page, it is necessary to add a lot of empty divs, which makes people feel very troublesome. It is not recommended to use, but you can understand.

The third method: browser support is good, it is recommended to use.

The fifth method: good browser support, it is recommended to use.

【CSS】Five ways to clear float

Guess you like