Use of clear:both in style css

Before you start up with clear first learn float from below link..

http://www.w3schools.com/css/css_float.asp

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

Example

.text_line {
clear: both;
}

Clear:

No floating elements allowed on the left or the right side of a specified <element> element

 

10-10-2014 11-15-12

 

CSS Syntax

clear: none|left|right|both|initial|inherit;

Property Values

Value Description
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

 

Ex: http://jsfiddle.net/bLsju/7/

http://css-tricks.com/almanac/properties/c/clear/

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

http://www.w3schools.com/cssref/pr_class_clear.asp

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s