Home > DeveloperSection > Blogs > Float and Clear property using HTML and CSS3

Float and Clear property using HTML and CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 2250  View(s)
Rate this:

Float and Clear property using HTML and CSS3

In this Blog I am trying to explain how to use the float and clear property using CSS3.

Float Property:

This property shifted the elements to the left or right side of the current line. Floated elements will stay on the float side, until other content flows around it. The float property has four values which are followings:-

1.       Left

This value is floating the element to the left side and content flowing to the right.

Example:  float: left;

2.       Right

This value is floating the element to the right and content flowing to the left.

Example:  float: right;

3.       None

Its default value of float property and its value will be removing any float values, and the content flow as it modest would.

Example:  float: none;

4.       Inherit

The element should have the similar float setting as the parent.

Example:  float: inherit;

Syntax:

Float: left| right | none | inherit

Clear property:

The clear property will let you clear any or both sides (left as well as right) of the element. In other words this property is used to turn off the float. We can also say the clear property opposite of the float property. Following the values of clear property;-

1.       None

None is the default value of clear property. In this case there will be no impact on the element. The floated elements can emerge on each side of the element.

Example:  clear: none;

2.       Both

If you put the value to 'both' then in that case no floated elements can impact on each side of the element.

Example:  clear: both;

3.       Left

If you put the value to 'left' then in that case no floated elements can impact on the left side of the element.

Example:  clear: left;

4.       Right

If you put the value to 'right' then in that case no floated elements can impact on right side of the element.

Example:  clear: right;

5.       Inherit

The element behavior should have the similar as the parent.

Example:  clear: inherit;

Syntax:

Clear: both | left| right | none | inherit

Sample:

CSS Code:

    <style type="text/css">

        .thumbnail

        {

            float: left;

            width: 110px;

            height: 90px;

            margin: 5px;

            border: 2px dotted #E5E5E5;

        }

        .text_line

        {

            clear: both;

            margin-bottom: 2px;

            font-size: 18px;

            color: #CD853F;

        }

    </style>

HTML Code:

<body>

    <p class="text_line">Mindstick&copy; Image Gallery</p>

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <p class="text_line">Mindstick Second row</p>

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <img class="thumbnail" src="mindstick.jpg" width="100" height="80">

    <p style="clear: both; color: #CD853F;">Resize your browser window and see the what heppens </p>

</body>

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick