CSS Float And Clear

Watch video presentation here for better understanding and subscribe for more;

Watch now!
In this tutorial we will learn use of float and clear properties as used in CSS. We will discuss each giving out the relevant examples.

1. Float

This property is used for specifying how an element should float. In this case an element for instance image can float either to the left, right or inherit. Mostly float is used for wrapping the text around the image.

i) right -in this case the element floats to the right of its container.
ii) left -in this case the element floats to the right of its container.
iii) inherit -the element inherits the float value of its parent.
iv) none -in this case there no float for the element.

Let’s have an example here for better understanding;

img {float: left;}

It will appear as shown here;

Learntechphilloh is a free program for training and facilitating learning of all programming languages and emerging technologies through this site and out youtube channel, it has been a helpful program for many people around the world, especially to beginners since it gives introduction and also offers free exercises and solutions. We regularly hold live sessions on youtube to enable practical training of our courses and interact directly with our learners through various social media platforms. The most important thing is to ensure this program reaches many people around the world by sharing with your friends and all other people who may be interested to learn programming.

You can have the image float to the right as ;

img{float: right;}

It will appear as shown here;

Learntechphilloh is a free program for training and facilitating learning of all programming languages and emerging technologies through this site and out youtube channel, it has been a helpful program for many people around the world, especially to beginners since it gives introduction and also offers free exercises and solutions. We regularly hold live sessions on youtube to enable practical training of our courses and interact directly with our learners through various social media platforms. The most important thing is to ensure this program reaches many people around the world by sharing with your friends and all other people who may be interested to learn programming.

2. Clear

This property is is used for specifying the what elements can float beside the cleared element and on which side, it mostly used after you have used a float property on an element. You should clear and float when clearing floats. For instance, if you float an element to the right then you should clear it to the right. Remember you ca either clear elements to the right, left, inherit or both as explained below;

i) right -in this case no floating element allowed on the right side of the container
ii) left -in this case no floating element is allowed to the left side of the container
iii) both -in this case allows floating elements on both sides
iv) none -in this case no floating element is allowed in either sides
v) inherit -in this case the element inherits the clear value

For better understanding we may have an example here;

div {clear: left;"}

It will produce this;

Learntechphilloh is a free program for training programming.

You will find that in the first case the image goes out of the container to fix this we uses overflow property, where by you need to set to auto as shown below;

.case2{overflow: auto;}

Then it will look as below;

Learntechphilloh is a free program for training and facilitating learning of all programming languages.
Thanks for reading through our tutorial, hope you understand the use of float and clear in CSS. As we continue learning CSS, hoping to meet you in our next tutorial.