CSS Clear Floating Tips

What is the general floating situation? The CSS float property is typically used in a box, which causes the parent object box to not be opened so that the CSS float floats.

Originally the two black Object box was in the red box, because the float was used for two black boxes, so two black boxes were floating, causing the red box to not open, so the float was created.

To put it simply, floats are caused by the use of float:left or float:right or both.

Second, the fluctuation produces the negative effect

1. Background cannot be displayed
Because of the floating, if the parent set (CSS background background) CSS background color or CSS background image, and the parent can not be open, so that the CSS background can not be displayed.

2, the frame can not be open
As in, if the parent set CSS border properties (CSS border), because the child uses the float property, resulting in floating, the parent cannot be open, resulting in the border can not be open with the content.

3, margin padding setting value is not displayed correctly
The value of the CSS margin property is not expressed correctly because of a float that causes the parent child to set the CSS padding. In particular, the padding and margin on the bottom are not displayed correctly.

Third, CSS to solve floating, clear floating method

Here DIVCSS5 to unify the floating solution, suppose there are three box objects, one parent containing two children, one using the Float:left attribute, and the other using the Float:right attribute. Also set the div CSS border, the parent CSS border color is red, two child border color is blue, the parent CSS background style is yellow, two children background is white, the parent CSS width width is 400px, two child CSS widths are 180px, Two children then set the same height of 100px, the parent CSS height heights are not set (usually for the actual CSS layout when the parent does not set the height, and the height is increased with the content of the adaptive height).

Parent CSS named ". DIVCSS5" corresponds to HTML tag using "<div class=" DIVCSS5 ">"
Two child CSS names are ". Divcss5-left" ". Divcss5-right"

According to the above description DIVCSS5 the corresponding CSS code and HTML code fragment

CSS code:

. DIVCSS5{width:400px;Border:1px solid #F00;background:#FF0}. Divcss5-left,.divcss5-right{width:180px;Height:100px;Border:1px solid #00F;background:#FFF}. Divcss5-left{float: Left}. Divcss5-right{float: Right}

Corresponding HTML source code fragment:

12 34        

The following DIVCSS5 summarizes some of the experience tutorials for clearing floats

1. The parent setting is appropriate for the CSS height
For the parent setting to fit the height style clear float, here to ". Divcss5" set a certain height, the general setting height needs to be able to determine the content height to set. Here we know that the content height is 100px+ the upper and lower border is 2px, so that the specific parent height is 102px

CSS code:

1 . DIVCSS5{width:400px;Border:1px solid #F00;background:#FF0;Height:102px}2 . Divcss5-left,.divcss5-right{width:180px;Height:100px;3 Border:1px solid #00F;background:#FFF}4 . Divcss5-left{float: Left}5 . Divcss5-right{float: Right}

The HTML code does not change. Get

Summary, use set height style, clear floating generation, if the object content height to be able to determine and can be calculated well.

2, Clear:both Clear floating
To unify the style, we create a new style selector CSS named ". Clear", and the corresponding selector style is "Clear:both", then we add this div to the "class=" clear "style before the end of parent </div>". This clears the float.

Specific CSS code:

1 . DIVCSS5{width:400px;Border:1px solid #F00;background:#FF0}2 . Divcss5-left,.divcss5-right{width:180px;Height:100px;3 Border:1px solid #00F;background:#FFF}4 . Divcss5-left{float: Left}5 . Divcss5-right{float: Right}6 . Clear{Clear:both}

HTML code:

12 3) 45            

Clear clears the float:

This css clear clear float floats, can not be set to the parent height also without the technical parent height, convenient to apply, but will add more CSS and HTML tags.

3. Parent DIV Definition Overflow:hidden
The Overflow:hidden style is added to the parent CSS selector, which can be cleared to create floats using float within the parent. The advantage is that few CSS code can solve the floating generation.

Overflow:hidden Resolving CSS Code:

1 . DIVCSS5{width:400px;Border:1px solid #F00;background:#FF0;Overflow:Hidden}2 . Divcss5-left,.divcss5-right{width:180px;Height:100px;3 Border:1px solid #00F;background:#FFF}4 . Divcss5-left{float: Left}5 . Divcss5-right{float: Right}

The HTML code does not change.

To resolve a float after clearing:

Why join Overflow:hidden to clear the float? That's because the Overflow:hidden property is equivalent to having the parent cling to the content so that it fits inside its object (including the div box using float), which clears the float. Css Overflow:hidden Clear Floating method DIVCSS5 recommended.

The above three points is compatible with the major browser to clear the floating method, other browsers incompatible with the incompatible methods are not necessary to introduce, we remember above three points to solve float floating clear floating method. But here the 3rd and 2nd resolutions are recommended to clear the floating method.

CSS Clear Floating Tips