CSS clear both clear float, cssclear

[Switch] CSS clear both clear float, cssclear

DIV + CSS clear both clear generates floating

We know that sometimes css float will generate css float. In this case, we need to clear the float and useClearStyle attributes can be implemented.

Next, let's get to know and learnCss clearKnowledge and usage.

Clear floating directory

I. clear syntax and Structure-TOP

1. clear Syntax:
Clear: none | left | right | both

2. clear parameter values:
None: Allow floating objects on both sides
Both: Float objects are not allowed.
Left: Float objects on the left are not allowed.
Right: Float objects on the right are not allowed.

3. clear explanation:
The value of this attribute indicates that the edge of a floating object is not allowed, and floating objects are not allowed on the left, floating objects on the right, and floating objects are not allowed on the right.

4. css Structure
Div {clear: left}
Div {clear: right}
Div {clear: both}

Ii. Common usage of div clear-TOP

We often use float css styles to generate float. The most common use is clear: both to clear the float. For example, two small objects in a large object use the css float style. To avoid floating, the background or border of the large object cannot be correctly displayed. In this case, clear: both is required to clear the floating.

Iii. Case study of css + div-TOP

Case study of DIVCSS5: Set a css width (css width) to 500px, a box, a css border (css border) to red, and a css background (css background) it is black, css padding is 10 PX, and contains two small boxes. One css float is right, and the other css float is left ), the border is white, the background color is gray, the width is 200px, And the css height is 150px. In this way, we will observe the effect of the case, see the floating generation and use clear to clear the floating.

1. Case css code:

1. . Divcss5 {width: 500px; background: #000; border: 1px solid # F00; padding: 10px}
2. . Divcss5_left,. divcss5_right {
3. Border: 1px solid # FFF; background: #999; width: 200px; height: 150px
4. }
5. /* Css comments: here we will wrap the css Code separately */
6. . Divcss5_left {float: left}/* css Note: Set float to the left */
7. . Divcss5_right {float: right}/* css Note: Set floating to right */

2. Case html code snippet:

1. <Div class = "divcss5">
2. <Div class = "divcss5_left"> float left box </div>
3. <Div class = "divcss5_right"> float right box </div>
4. </Div>

3. Case results

Case study of css div floating generation and Removal

In this case, clear the float and name the css "divcss5" box.

4. Clear Floating Method

We add the css code to the CSS code:

1. . Clear {clear: both}

". Divcss5" box in Html code</Div>Add the code before the end tag:

1. <Div class = "clear"> </div>

Use Case Study of eventually clearing floating with div css clear

Clear usage case

Read more: CSS clear float floating tip http://www.divcss5.com/jiqiao/j406.shtml

Iv. Summary of DIVCSS5-TOP

Clear can be used to clear float fluctuations. Note that the clear style object is added to the position. divcss5 "to clear the floating, we just need to add this object before the div label ends to clear the internal small box to generate the floating. In general, clear: both is often used to clear floating. Other clear: left and clear: right can be used to expand learning practices based on the clear both case.

 

Article Source: http://www.divcss5.com/rumen/r424.shtml