Understanding & Clearing Floats CSS Tutorial

The CSS float: property is a confusing one for some people when first dealing with it, and this insightful video tutorial does a great job explaining just about everything you need to know to keep you out of trouble.

In this example the goal is to create a sidebar positioned in a precise way on a webpage that has pre-existing text that will wrap around this new element. This will all be accomplished through the use of CSS floats. Before moving on, it’s important to understand that a CSS float moves an element to the left or right only. Subsequent elements wrap around the floating element on their own.

Because of the limitations aligning items through floating presents, it is sometimes necessary for elements on your page to ‘clear the floats’ that are present. This is done through both HTML and CSS. There are many ways get it done, and in this video the easiest option presented is first identifying an element in your HTML you wish to target, followed by a new CSS rule that has a clear: property correlating to the HTML element you want to sit beneath the item that was floated on the page.

It may sound a bit confusing, but it really is quite simple. The same thing is accomplished through another method, called clearfix, that is also mentioned in the video that may be more universal and a better overall fix for this problem. The following code is something that can be rendered properly by all browsers and can be applied to any element in your HTML document it’s correlated to.

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

If this CSS tutorial has helped you to better understand how you can accomplish certain layout tasks, then you may also enjoy our post on positioning elements using CSS. Thanks for stopping by, and be sure to let us know if you have a request for a future tutorial or wish to share one of your own with the rest of the community!