b. Clear CSS Style Property Tutorial: None, Both, Left or Right

Clear CSS property specifies if the block element allows earlier floating element to its right, left or both side. This lets block element being displayed in proper alignment to earlier floating elements.The Clear CSS property if is none, would allow floating elements on both sides. If is it left, it would move block element below any earlier floating element on the left side. Similarly with right. If the value is both, the block element is moved below any earlier floating elements.

Example:

Let there be 3 images that are to be displayed to the rigt of the content.

If we use following CSS:

CSS Code:

.floatright { float: right; }

HTML Code:

<p>

I'll put something to the right

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

</p>

 

 

The output would be:

I'll put somthing to the right

 

 

 

 Image1 Image2 Image3

If we want to create margins in the images on the right side, we add following property to the css:

CSS Code:

.floatright { float: right; margin: 0 0 10px 10px; }

HTML Code:

<p>

I'll put something to the right

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

</p>

The output would be:

 

I'll put somthing to the right

 

 

 

 IMAGE 1 IMAGE 2 IMAGE 3

 

Now, we put clear:right; in the css file, each image would be displayed vertically on top of on another.

CSS Code:

.floatright { float: right; margin: 0 0 10px 10px; clear:right;}

HTML Code:

<p>

I'll put something to the right

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

<img class="floatright" src="images/image.gif" alt="" width="60" height="100"> IMAGE ON RIGHT </a>

</p>

The output would be:

 

I'll put somthing to the right

 

 

 
IMAGE 1
IMAGE 2
IMAGE 3

 

Thus, "clear:right;" applied to "float: right': has forced each image to move below the other on the right side.