A detailed description of floating in CSS and three ways to clear floating

Source: Internet
Author: User
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 two P is sorted up and down, to the above one P set Margin-bottom, to the following one P set Margin-top, then two margin will occur merge phenomenon, merge later the value of the larger.

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;

}

<p class= "Clearfix" ></p>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.