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

Before talking about floating, let’s talk about two special phenomena of the margin attribute in CSS

1, Outside The merging phenomenon of distance :

If two p are sorted up and down, set margin-bottom to the upper p and set margin-top to the lower p , then the two margins will be merged, and the one with the larger value after the merge will occur.

Generally there is no need to deal with this phenomenon.

2, margin collapse phenomenon:

If a large box contains a small box and set margin-top for the small box, the large box will translate downward together.

Solution:

1.0 Add a border border attribute to the big box.

2.0 Set an overflow attribute to the big box.

3.0 uses float.

Supplement: The common attributes of overflow are as follows:

##Auto

visible

:default value. The content will not be trimmed and will be rendered outside the element box.

##Hidden：

The content is trimmed and the remaining content is invisible.

##Scroll

：

The content is trimmed, but the browser displays scroll bars to view the remaining content.

：

## If content is trimmed, the browser displays scroll bars to view the remaining content.

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

:after

{

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

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

Line-Height

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

# Visibility

: Hidden; // Hidden elements }

.Clearfix {

Zoom: 1;/*

}

visible:default value. The content will not be trimmed and will be rendered outside the element box. ## If content is trimmed, the browser displays scroll bars to view the remaining content.

	Hidden ：	The content will be trimmed and the remaining content will be invisible.
##Scroll：	The content is trimmed, but the browser displays scroll bars to view the remaining content.
##Auto ：

The above is the detailed content of Detailed explanation of floats in CSS and three methods of clearing floats. For more information, please follow other related articles on the PHP Chinese website!