Several ways to clear floating

Recently came a small apprentice, always by the floating box of the whole circle, as a small master I will give him comb:

A float is a class name or attribute in a page layout that some boxes add float:left or Float:right. It has the following characteristics:

1. Floating elements are separated from the standard flow;
2. The floating element overrides the element of the standard flow;
3. Floating rules: Floating to find floating, do not float to find not floating;
4. The position of the floating display is corresponding to the position of the original non-floating;
5. The floating elements affect the following elements;
6. Floating elements change the way they are displayed (inline block-level elements):

A) Whether the element is an inline element or a block-level element will be displayed on the same line;

b) The floating element can be set to a wide height;

Example: A parent box has a child box, the parent box does not have a width height, if the child box floats in the parent box, the following element will automatically fill the position, so you need to clear the float (clear:both).

Clear float:

1. Additional labeling method: Put a label under the floating box and use the Clear:both class name or attribute in this tab to clear the effect of floating on the page:

A) Internal label: the height of the parent box will be re-opened.

b) External label: The floating effect will be clear but will not open the parent box.

Note: This method is generally not used and will increase the page label.

2. Use the Overflow property: Find the parent element of the floating box first, and then add the Overflow:hidden attribute to the parent element.

Note: This method is generally not used because the area where the element is overrun is hidden.

3. Using pseudo-elements:

. clearfix:after {
Content: ";
height:0;
line-height:0; /* or overflow:hidden*/
Display:block;
Visibility:hidden;
Clear:both;
}
. clearfix {
Zoom:1; /* Compatible with ie6*/
}

4. Double pseudo-element tags: elements that do not exist on the page can be added via CSS, and each element has its own pseudo-elements.

. Clearfix:before,
. clearfix:after {
Content: ";
display:table;
}
. clearfix:after {
Clear:both;
}
. clearfix {
Zoom:1;
}

This is my summary of several ways to clear the float, I hope to be helpful to everyone.

Several ways to clear floating