Display & Position Navigation Tutorial

Clear & Float

Floating and clearing elements is a very popular way to manipulate content, and the layout of a page. They are also some of the most misunderstood, and mis-used concepts in web development. Learning how and when to float or clear an element to get your layout to work the way you are wanting to can take a lot of time and patience.


Float

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works.

With float, an element can be pushed to the left or right, allowing other elements to wrap around it. The only arguments the float property can take are left | right | none | inherit. Most often times you will be using left | right.


HTML Example paragraph without Float:
 1 <html>
 2         <head>
 3             <title></title>
 4         </head>
 5         <body>
 6             <img src="http://placehold.it/100x100" />
 7             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 
 8             feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
 9             vitae est. Mauris placerat eleifend leo.</p>
10         </body>
11     </html>

View the result 


HTML Paragraph with Float:
1 img {
2 	   float: left;
3     }

View the result 


As you can see, this example just took two block-level elements and put them on the same line by using the float property.


Resources:



Clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

You will usually see the clear property tied to it's own utility class that is used to remedy floats somewhere in a page.

1 .clearfix {
2 	   clear: both;
3     }

Using the float example HTML, lets add in a second paragraph that we do not want to wrap around the image tag.

 1 <html>
 2         <head>
 3             <title></title>
 4         </head>
 5         <body>
 6             <img src="http://placehold.it/100x100" />
 7 
 8             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 
 9             feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
10             vitae est. Mauris placerat eleifend leo.</p>
11 
12             <div class="clearfix"></div>
13 
14             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 
15             feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
16             vitae est. Mauris placerat eleifend leo.</p>
17         </body>
18     </html>

View the result 

Adding the .clearfix element into the DOM has successfully prevented the second paragraph from floating around the image. Anything that comes after that .clearfix will behave normally, until another floated element is specified.


Resources: