Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with CSS Floating and Clear Floating

In this article I will cover the concept of CSS - Floating. Also I will discuss the implementation of Clear Float and go through some examples to make you understand how to position your elements on the web page.

Introduction:

This tutorial will discuss the floating property of CSS (Cascading style sheet). After this tutorial you will be able to position your elements (Text, Images etc.) on the web page as you want.

In order to understand the floating point of element you must know about float. Float is a CSS positioning property. If it is applied to the elements on a web page, it will be an element followed by another element.

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage.

The elements which are absolutely positioned will independent of position of other elements nor will they affect them, whether they touch each other or not. All the elements on the page cannot be floated but in order to make use of this special property you must understand it.

You can float elements to the right or to the left. Any element that follows the floated element will flow around the floated element on the other side. For example, if I float an image to the left, any text or other elements following it will flow around it and will be placed in the right. And if I float an image to the right, any text or other elements following it will flow around it and will be placed in the right.

This is first script which will tell you how your elements will float.

Listing 1: Script to Left Floating Element

<html>
<head>
<title>Mrbool.com Tutorials - CSS Floating </title>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<p>Page showing image floating left side of paragraph:</p>
<p width="500px">
<img class='imagem_artigo' src="inception.jpg" width="200" height="150" />
Inception is a 2010 American science fiction/action film. The Movie talk about different level of dreams and one can enter in dream of another person...   
</p>
</body>
</html> 
figure output of floating script - Image is floating left here, you also use float to right

Figure 1: Above figure output of floating script - Image is floating left here, you also use float to right.

Here Elements are floated horizontally, i.e. an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually it is all the way to the left or right of the containing element.The elements after the floating element will flow around it. The elements before the floating element will get affected. If an image is floated to the right, a following text flows around it, to the left.

Flowing Elements - Next to Each Other :

If you place several floating elements after each other, they will float next to each other if there is room. Here we have made an image gallery using the float property. Following script will show you how to place element on page next to each other.

Listing 2: Script of Floating Next to Each Other

<html>
<head>
<title>Mrbool.com Tutorials - CSS Floating </title>
<style type="text/css">
.thumbnail 
{
float:left;
width:120px;
height:100px;
margin:10px;
}
</style>
</head>
<body>
<h3>Element Flow Next to Each Other </h3>
<img class='imagem_artigo' class="thumbnail" src="1.png" width="110" height="90">
<img class='imagem_artigo' class="thumbnail" src="2.png" width="110" height="90">
<img class='imagem_artigo' class="thumbnail" src="4.png" width="110" height="90">
<img class='imagem_artigo' class="thumbnail" src="5.png" width="110" height="90">

</body>
</html>
 
 figure is an image gallery in thumbnails view which helps you to understand the concept for placing element next to each other

Figure 2: Above figure is an image gallery in thumbnails view which helps you to understand the concept for placing element next to each other .

Turning Off The Float:

Now you know how to get an element to float, it's important to know how to turn off the float. This is done using CSS “clear” property. You can clear left floats, right floats or both.

Listing 3: Script to use of Clear Float Property

<html>
<head>
<title>Mrbool.com Tutorials - CSS Floating </title>
<style type="text/css">
.thumbnail 
{
float:left;
width:120px;
height:100px;
margin:7px;
}
.text_line
{
clear:left;
margin-bottom:3px;
}

</style>
</head>
<body>
<h3>Example to clear property layout for first attribute</h3>
<img class='imagem_artigo' class="thumbnail" src="1.png" width="110" height="90">
<img class='imagem_artigo' class="thumbnail" src="2.png" width="110" height="90">
<img class='imagem_artigo' class="thumbnail" src="4.png" width="110" height="90">
<h3 class="text_line">Example to clear property layout for second  attribute</h3>
<img class='imagem_artigo' src="5.png" width="110" height="90">
<img class='imagem_artigo' src="6.png" width="110" height="90">
<img class='imagem_artigo' src="7.png" width="110" height="90">
</body>
</html> 
This figure is output of clear property of CSS floating elements

Figure3: This figure is output of clear property of CSS floating elements.

Unlike previous example, all the image elements were in same row and floating towards left. Here three thumbnails are floating and then a heading with clear floating and then again three thumbnails with floating property.

Conclusion:

Floats are useful in many situations and will often be used together with positioning. As always go and explore the examples given in this tutorial and let us know your queries.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login