One, foreword

CSS clear both uses the CSS float property to create a float. Clear both uses the CSS float property to create a float.

B. Clear grammar and structure

1. The clear syntax

clear : none | left|right| both
Copy the code

2. Clear Parameter Values

Property Description None Allows floating objects on both sides. Bot does not allow floating objects. Left does not allow floating objects on the left

3. The clear explanation

The value of this property specifies the edge cases where no floating objects are allowed. No floating objects are allowed on the left, no floating objects are allowed on the right, and no floating objects are allowed.

4. CSS structure

div {
                clear: left
            }


            div {
                clear: right
            }


            div {
                clear: both
            }
Copy the code

Div clear

The most common is to use clear:both to clear floats.

For example, if there are two small objects in a large object using CSS float style, the background or border of the large object will not display correctly. Clear :both clears the float.

Four cases,

1. Case description

Set a CSS width to 500px; Box (div), CSS border (red), CSS background (black), CSS padding (10px) A CSS float (float: right on the right), a CSS float (float: left) on the left, the two has a white border, background color is gray, width is 200 px, CSS height, CSS, height of 150 px.

To see the effect of the case, see the float created and clear the float using clear.

The CSS code:

.div css5 { width: 500px; background: #000; border: 1px solid #F00; padding: 10px } .div css5_left, .div css5_right { border: 1px solid #FFF; background: #999; width: 200px; Div css5_left {float: float: float: float: float: float: float: float: float: float: float: float: float: float Left} /* CSS comment: set float to left */. Div css5_right {float: rightCopy the code

HTML code slice:

<div class="div css5_left">float left box </div > <div class="div css5_right">float right box </div > </div>Copy the code

Case effect screenshot

2. Clear floating methods

Add CSS code to CSS code:

.clear{ clear:both}
Copy the code

Html code “.div css5 “box * before closing the tag:

<div  class="clear"></div>
Copy the code

Clear floating renderings:

Five, the summary

This article, based on Html, shows how you can use clear to clear floats. When using a clear style object to add position, just before the object’s div tag ends, add clears the inner box and creates a float. Clear :both is usually used to clear floats. Using code and screenshots of the way, I hope to better help you learn.

Learn more about front-end, Python crawlers, big data and more at pdcfighting.com/