How To Use CSS Float Property.

Hi friends

As you know that our last post about css conflicts and today we are going to discuss about the float property which is used for designing layout. Before using float people try to create layout with html tables and frames but later the css property float which is now famous and use by designer to make the layout. With the help of float property you can easily design the layout but the problem is that if you don’t know it properly you have to face lots of problem. So today I am going to discuss the all those problem which relate to the floats.

ALSO READ:

Resolve CSS Conflicts.

HTML Image Tag And Link Tag.

CSS Selectors.

WHAT IS THE FLOAT?

Float is the property of css which is used to positioning the element on the webpage. It has four values left, right, none and inherit.

                                                                                                                       

Left to float the element on the left side.

Right to float the element on the right side.

None it is the default property. The element will not float.

Inherit the property inherited from the parent element.

ADVANTAGES OF FLOAT

The float property used to design layout.

It is used to the wrap text around the image.

It is used to positioning the element.

It is used to make columns.

EXAMPLE;

#para1{float:left;
width:200px;
margin:10px;
}#para2{float:left;
width:200px;
margin:10px;
}

CLEAR

It is the very helpful property to control the float. For example you make layout in which you add the float to the two element such as #content and #sidebar and footer move itself behind the these two elements. How to recover the float to its original position?

We use the clear property to recover the original position of elements.

For example

Example befor using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;
}

Example after using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;

clear:both; 

}

COLLAPSING;

When an element contain in parent element than you add the float to the child element then container element collapse itself. How to solve them there are many ways to solve these problems. Which we discuss below?

FIRST METHOD: TO ADD THE TAG.

By this method you have to add the empty div tag or other tag you cam add but empty div tag is better. After adding this the parent element automatically expand.

SECOND METHOD: TO ADD OVERFLOW PROPERTY:

In this method you have to add overflow property to the parent element. If you set the auto or hidden value to it the parent element automatically expand and contain float element.

THIRD METHOD: TO USE CLEAR PROPERTY;

In the third method we use the pseudo selector (:after) to solve the problem. We apply class to the element and clear the float property and you can also add the id to the element.

.clear:after{
 content: ".";
 display: block; height: 0;
 clear:both;
 visibility: hidden;} 

CONCLUSION;

You can style the layout with float property  and now you can face all the problems related the float.

Please remember in your prayers and don’t forget to share our post with you friends.THANKS!