CSS Clear Float _ clear float float

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:

2. <div class="DIVCSS5">
4. <div class="Divcss5-left">left floating </div>
6. <div class="divcss5-right">right floating </div>
8. <div class="clear"></div>
10. </div>

Clear clears floating

Clear clear floating using CSS clear clears floating

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;
   border:1px solid #00F; background: #FFF}
3. . divcss5-left{Float:left}
4. . divcss5-right{Float:right}

The HTML code does not change.

Resolve after clearing floating

Overflow clear float produces floating overflow:hidden clear float

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 Float _ clear float float