CSS has to master the technique of "clearing float float"

First, the reason for floating

What is the general float? It is generally a box that uses the CSS float property, which causes the parent object box to not be stretched so that the floating CSS float is generated.

Float Create style effect screenshot

Originally two black object boxes are in the red box, because the two black boxes using float float, so two black boxes produced a float, resulting in the red box can not open, so the float produced.

Simply put, the float is due to the use of float:left or Float:right or both are produced by the float.

Second, the floating has a negative effect

1, the background can not show

Because of the float, if the parent is set (CSS background background) CSS background color or CSS background picture, and the parent can not be stretched, so that the CSS background can not be displayed.

2, the border can not be stretched

As shown in the figure above, if the parent has a CSS border property (CSS border), because the float property is used in the child, the parent cannot be stretched, causing the border to not be stretched with the content.

3, margin padding set value does not display correctly

The values for CSS padding, CSS margin properties are not correctly expressed because of the float, which causes the parent child to set between the In particular, the padding and margin below are not displayed correctly.

Third , the CSS solution floating, clear floating method

Here DIVCSS5 for a unified explanation of floating solutions, assuming that there are three box objects, a parent contains two children, the child one using the Float:left attribute, and the other child 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, the two child background is white, the parent CSS width is 400px, two children css width is 180px, Two children and then set the same height of 100px, the parent CSS height height is not set (usually the actual CSS layout when the parent does not set the height, and the height is increased with the content of the adaptive height).

The parent CSS is named ". Divcss5" corresponding to HTML tags using "<div class=" DIVCSS5 ">"

Two child CSS names are ". Divcss5-left" ". Divcss5-right", respectively.

According to the above description DIVCSS5 gives 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:

<div class= "DIVCSS5" >
<div class= "Divcss5-left" >left floating </div>
<div class= "Divcss5-right" >right floating </div>
</div>

Clear floating Case screenshot parent needs to clear floating

The following DIVCSS5 summarizes some of the lessons learned for clearing floats

1. Set the CSS height for the parent level

The parent setting is suitable for height style purge float, here to ". Divcss5" set a certain height, the general setting height needs to be able to determine the content height can be set. Here we know the content height is the 100px+ up and down border is 2px, so the specific parent height is 102px

CSS code:

. divcss5{width:400px;border:1px solid #F00; background: #FF0; height:102px}
. divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F; background: #FFF}
. divcss5-left{Float:left}
. divcss5-right{Float:right}

The HTML code does not change. Get screenshots

Clear floating with height heights

Summary, using the set height style, clear float generation, if the object content height to be able to determine and calculate well.

2, Clear:both Clear floating

To unify the styles, we create a new style selector CSS named ". Clear", and the corresponding selector style is "Clear:both", and then we're in the parent "

"Add this div before the end to introduce the" class= "clear" style. This clears the float.

Specific 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}
. clear{Clear:both}

HTML code:

<div class= "DIVCSS5" >
<div class= "Divcss5-left" >left floating </div>
<div class= "Divcss5-right" >right floating </div>
<div class= "Clear" ></div>
</div>

Clear clears floating screenshot

Clear clears floating screenshots use CSS clear to remove floating

This CSS clear clears float to create a float that can be easily applied without having to set the height of the parent or the technical parent height, but will add CSS and HTML tags.

3, the parent div definition Overflow:hidden

Adds a Overflow:hidden style to the parent CSS selector, which lets you clear the float that is used in the parent level. The advantage is that few CSS code can be used to resolve floating generation.

Overflow:hidden to resolve CSS code:

. divcss5{width:400px;border:1px solid #F00; background: #FF0; Overflow:hidden}
. divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F; background: #FFF}
. divcss5-left{Float:left}
. divcss5-right{Float:right}

The HTML code does not change.

Resolve clear Float after screenshot

Overflow clear float to generate floating screenshot Overflow:hidden Clear floating screenshot

Why add Overflow:hidden to clear the float? That's because the Overflow:hidden property is equivalent to keeping the parent close to the content so that the contents of the object (including the div box using float) are kept close to it, thereby clearing the float. Css Overflow:hidden Clear Floating method DIVCSS5 recommended.

Above three points is compatible with the main browser to clear the floating method, other browsers are incompatible with the method of incompatibility is not necessary to introduce, we remember the above three points to solve float float floating clear floating method. However, the 3rd and 2nd solutions are recommended for clearing floating methods.