Detailed explanation of floats in CSS and three methods of clearing floats

##Hidden：

The content is trimmed and the remaining content is invisible.

：

：

Floating

Floating is an important point in CSS. Why use floating?

is to solve the problem of displaying multiple boxes in one line.

float: left; float: right;

Floating has three characteristics:

1, out of the standard stream, not Take up position.

2, will change the default display mode of the element display to block level element.

3. Floating elements will only cover the following block-level elements and will not affect the previous block-level elements.

What is a standard stream?

is the default browser standard for placing boxes.

Features of standard flow:

1. Block-level elements occupy one line from top to bottom.

2, inline elements, inline block-level elements are displayed in one line from left to right.

3, occupy the position.

The impact of floating and Three ways to clear floating

The impact of floating on the page:

If a parent box There is a child box in the box, and the parent box has no height set. The child box is floated in the parent box, so the height of the parent box will be 0 in the future. Since the height of the parent box is 0, the following elements will automatically fill in, so this It is time to clear the float.

Clear: both

1, use the additional label method:

Put another label under the floating box, and use it in this label clear:both, to clear the impact of floating on the page.

.clearfix{

                                                                                                                                                                                                                              /p>

a. Internal label: The height of the parent box of this floating box will be re-expanded

b. External label: The influence of this floating box will be cleared, but it will not be expanded. Open the parent box.

Note: Generally, this method is not used to clear floats. Because this method of clearing floats will increase the label of the page.

2, use the overflow attribute to clear the float:

First find the parent element of the floating box, and then add an attribute to the parent element to clear the parent element. The impact of floating child elements on the page.

overflow: hidden;

3, use pseudo elements to clear floats:

.clearfix

{

Content: "" "; // Add the content to emptiness

## HEIGHT : 0; // The content height is 0

: 0;//The height of the content text is 0                                                                                          display: block;

: Hidden; // Hidden elements }

.Clearfix {

Zoom: 1;/*

}