What's the difference between "clear: both;" and clearfix?

clear: both; is used to make an element appear below any floated elements that are above it. So given the following HTML, the would appear below the :

<img src="foo.jpg" style="float: right">
<p class="clear: both;">Things and stuff</p>

Note: You can usually achieve the same effect as .clearfix with less code by using the overflow: hidden; method (although it has it's own issues). Alternatively, float the element you'd apply .clearfix to (although that comes with it's own issues, too).
.clearfix is designed to make an element expand to enclose any floated elements within it. So, in the following example, the

would expand vertically to fit the content inside it:



clear:both can be applied to any block-level element (a div is frequently used), but sometimes this involves adding non-semantic mark-up into the document just for the purpose of clearing a float.
The clearfix technique is a way of clearing the float without having to add non-semantic elements. Older browsers however, such as IE6 and IE7, do not support the clearfix technique
clear:both is always enough when applied to a block-level element that appears after a float, the issue is adding the extra mark-up for it - your document can end up with many extra elements that are just there to clear floats...

Browse More Articles

Tweet

Written by KiranBloger

Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing