CSS, floated, clear Records, and some reprinted elsewhere

Div+css clear both clear generates floating

We know that sometimes using CSS float floats will produce CSS floats, this time we need to clear the float, we use the clear style properties can be implemented.

The Clear property specifies which side of the element does not allow other floating elements

1. Clear syntax:
Clear:none | Left|right| Both

value	Description
Left	Floating elements are not allowed on the left side.
Right	Floating elements are not allowed on the right.
Both	Floating elements are not allowed on the left or right sides.
None	The default value. Allows floating elements to appear on both sides.
Inherit	Specifies that the value of the clear property should be inherited from the parent element.

2. CSS Structure
Div{clear:left}
Div{clear:right}
Div{clear:both}

3, commonly used to the place

We used to create floats after using the float CSS style, most often using clear:both to clear the float. For example, a large object with 2 small objects using the CSS float style to avoid floating, large object background or border is not displayed correctly, this time we need to clear:both clear floating.

4. Example

Example 1

Code like this

Since each item has a floating set float:left, you need to clear the float at the back and open the outer box of the shop to the back

<div class= "Clear" ></div>

. clear{
Clear:both;
}

Example 2

DIVCSS5 Case Description: The CSS width is set to 500px, the box, CSS border (CSS border) is red, CSS background (CSS background) is black, CSS padding 10px box, Wrapped in 2 small boxes, a CSS floating on the right (Float:right), a CSS float on the left (Float:left), the border is white, the background color is gray, width is 200px,css height (CSS height) is 150px. So let's look at the case effect, see floating generation and use clear to clear the float.

1, Case CSS code:

1. . Divcss5{width:500px;background: #000; border:1px solid #F00;p adding:10px}
2. . divcss5_left,.divcss5_right{
3. border:1px solid #FFF; background: #999; width:200px;height:150px
4. }
5. /* CSS Comments: Here in order to separate, the CSS code line */
6. . divcss5_left{float:left}/* CSS Comment: Set float left */
7. . divcss5_right{float:right}/* CSS Comment: set float on right * /

Div+css clear both clear generates floating

We know that sometimes using CSS float floats will produce CSS floats, this time we need to clear the float, we use the clear style properties can be implemented.

Next we come to know and learn css clear knowledge and usage.

Clear clears the floating directory

1. Clear syntax and structure
2. Div Clear Common places
3. Css+div case
4. DIVCSS5 Summary

First, clear syntax and structure-TOP

1. Clear syntax:
Clear:none | Left|right| Both

2. Clear parameter Value Description:
None: Allow floating objects on both sides
Both: Floating objects are not allowed
Left: does not allow floating objects
Right: Do not allow floating objects

3. Clear explanation:
The value of this property indicates that the edge of a floating object is not allowed, the left side of the object is not allowed to float, the right is not allowed to float, and no floating object is allowed.

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

Second, Div clear common place-TOP

We used to create floats after using the float CSS style, most often using clear:both to clear the float. For example, a large object with 2 small objects using the CSS float style to avoid floating, large object background or border is not displayed correctly, this time we need to clear:both clear floating.

Three, Css+div case-TOP

DIVCSS5 Case Description: The CSS width is set to 500px, the box, CSS border (CSS border) is red, CSS background (CSS background) is black, CSS padding 10px box, Wrapped in 2 small boxes, a CSS floating on the right (Float:right), a CSS float on the left (Float:left), the border is white, the background color is gray, width is 200px,css height (CSS height) is 150px. So let's look at the case effect, see floating generation and use clear to clear the float.

1, Case CSS code:

1. . Divcss5{width:500px;background: #000; border:1px solid #F00;p adding:10px}
2. . divcss5_left,.divcss5_right{
3. border:1px solid #FFF; background: #999; width:200px;height:150px
4. }
5. /* CSS Comments: Here in order to separate, the CSS code line */
6. . divcss5_left{float:left}/* CSS Comment: Set float left */
7. . divcss5_right{float:right}/* CSS Comment: set float on right */

2. Case HTML code snippet:

2. <div class="DIVCSS5">
4. <div class="Divcss5_left">float left box </div>
6. <div class="divcss5_right">float Right box </div>
8. </div>

3. Case effect

4. Clear Floating method

We add CSS code to the CSS code:

1. . clear{Clear:both}

". Divcss5" box in HTML code </div> Add code before closing the tag:

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

Final use of the div CSS clear clears the floating post application usage case

Iv. Summary of DIVCSS5-TOP

Use clear to clear the float generated by float, note that the clear style object joins the position, as in the case of ". Divcss5" clear float, we just need to add this object div tag before the end of the box to clear the inner small boxes to create a float. While generally used clear:both to clear the float, other clear:left and clear:right can be down according to the clear both case extension learning practice.

CSS, floated, clear Records, and some reprinted elsewhere