TK 0

Hi. I'm unable to understand the difference between just putting "clear: both" and setting a clearfix.

I plan to use the following clearfix strategy (if I need it).

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
  height: 1%;
}

I just started to learn CSS in depth. Clearfix seems to be the important tool. I would be grateful if anybody could give me simple examples where just putting "clear: both;" is not enough.

3 answers

Olly Hodgson 372
2
points
This was chosen as the best answer

They serve slightly different purposes:

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

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

.clearfix is designed to make an element expand to enclose any floated elements within it. So, in the following example, the <div> would expand vertically to fit the content inside it:

<div class="clearfix" style="border: 1px solid silver;">
    <img src="foo.jpg" style="float: right">
    <p style="float: left;">Things and stuff</p>
</div>

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).

Answered almost 3 years ago by Olly Hodgson
danwellman 5600
1
point

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...

Answered almost 3 years ago by danwellman
Tony Crockford 7095
1
point

The full version of the clearfix code:

http://www.positioniseverything.net/easyclearing.html

will work for older browsers, but mostly overflow:hidden appears to be enough to get containers to shrink wrap floated elements. see:

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answered almost 3 years ago by Tony Crockford