Why do you want to clear floats?

The float is cleared mainly to solve the problem that the parent element has an internal height of 0 due to the float of the child element

1. As follows, I set a boder for the parent box and put two boxes inside, one big and one small. If I do not set the float for the big and small boxes, they will open the parent box by default

2. When I add float properties to the inner two boxes

The top dark blue box will come on top, and then the parent box will become a line because the height is not set, and the big and small will float

To summarize:

  • When the parent element does not give the height,

  • Internal elements are not floating when they are pushed apart

  • When it floats, the parent element becomes a line

This time many people will think of new tag clear: both and float methods, but these two methods are not recommended!

What is clear: both

Clear: both: Essence is closed floating, is to let the parent box closed exit and entrance, do not let the child box out

Ways to Clear a float (the 4 most Common)

1. Extra label method (after the last floating label, add a new label, set it clear: both;) (Not recommended)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < img style =" text-align: center; width: 400px; border: 1px solid deeppink; } .big{ width: 200px; height: 200px; background: darkorange; float: left; } .small{ width: 120px; height: 120px; background: darkmagenta; float: left; } .footer{ width: 900px; height: 100px; background: darkslateblue; } .clear{ clear:both; } </style> </head> <body> <div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div Class = "clear" > additional label method < / div > < / div > < div class = "footer" > < / div > < / body > < / HTML >Copy the code

At this time

If we clear the float, the parent automatically detects the highest height of the subbox and then matches it.

Advantages: easy to understand, convenient

Disadvantages: add meaningless tags, poor semantics

Not recommended.

2. Add overflow attribute to parent (add overflow:hidden to parent) (not recommended)

The float is cleared by triggering the BFC

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}
Copy the code

Advantage: Simple code

Disadvantages: When the content is increased, it is easy to cause the content to be hidden and cannot show the overflow element

Not recommended

3. Clear floats with after pseudo-elements (recommended)

.clearfix:after{/* pseudoelement is inline element normal browser clear float method */ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1; /* * * * * * * * * * * * * *Copy the code
big
small

Disadvantages: IE6-7 does not support pseudo-element: after, using Zoom :1 to trigger hasLayout.

It is recommended to use

4. Clear the float with before and after double pseudo-elements

 .clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
Copy the code
big
small

Disadvantages: hasLayout fires with Zoom :1.

It is recommended to use