Floating in CSS and three ways to clear floats

When it comes to floating, let's talk about two special phenomena of the margin attribute in CSS.

1, the merger phenomenon of the margin:

If the two Div is sorted up and down, give the above div a margin-bottom, set the margin-top for the following Div, then two margin will merge, and the later value of the larger one.

For this phenomenon generally do not have to deal with.

2,margin collapse Phenomenon:

If a large box contains a small box for a small box set the margin-top large box will pan down together.

Solution:

1.0 add a border to the large box border property.

2.0 set a overflow property for the large box.

3.0 use float.

Supplement: The Common properties of overflow are as follows:

Visible	: Default value. The content is not trimmed and is rendered outside the element box.
Hidden :	The content is trimmed and the rest is not visible.
Scroll :	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto :	If the content is trimmed, the browser displays scroll bars to see the rest of the content.

Floating

Floating is one of the key points in CSS, why use floating?

is to solve the problem of displaying multiple boxes in a row.

Float:left; float:right;

There are three characteristics of floating:

1, out of standard flow, not occupying position.

2, the default display of the element is changed to show the block-level element.

3, floating elements will only overwrite the block-level elements behind, without affecting the block-level elements at the front.

What is a standard flow?

is the default browser display box standard.

Features of the standard flow:

1, block-level elements from top to bottom, exclusive row.

2, inline elements, inline block-level elements are displayed in a row from left to right.

3, occupies the position.

Floating effect and three ways to clear the float

Impact of floating on the page:

If there is a child box in a parent box, and the parent box is not set high, the child box floats in the parent box, then the height of the parent box will be 0. Because the parent box has a height of 0, the following element automatically complements it, so this time the float is cleared.

Clear:both

1, using the additional labeling method:

Place a label under the floating box and use Clear:both in this tab to clear the effect of the float on the page.

. clearfix{

Clear:both;

}

<div class= "Clearfix" ></div>

A. Internal tag: The height of the box's parent box will be re-opened.

B. External label: The effect of this floating box will be cleared, but the parent box will not be opened.

Note: In general, this method is not used to clear the float. Because this way of clearing floats increases the label of the page.

2, use the overflow property to clear the float:

The parent element of the floating box is first found, and then a property is added to the parent element, which is the effect of removing the child elements in the parent element floating on the page.

Overflow:hidden;

3, use pseudo-elements to clear the float:

. clearfix:after {

Content: "";//Add Empty

height:0;//content height of 0

line-height:0;//content text has a height of 0

display:block;//to set text to block-level elements

clear:both;//Clear Float

visibility:hidden;//to hide elements

}

. clearfix {

zoom:1;/* for compatibility with ie6*/

}

Visible	: Default value. The content is not trimmed and is rendered outside the element box.
Hidden :	The content is trimmed and the rest is not visible.
Scroll :	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto :	If the content is trimmed, the browser displays scroll bars to see the rest of the content.

Floating in CSS and three ways to clear floats