0

I learned two different ways of building a clearer element in HTML/CSS and I just would like to know what is the most efficient one.

First one :

HTML

<div class="clear"></div>

CSS

.clear{
   clear:both;
}

Second one (some people told me that is the good one) :

HTML :

<div class="clear">&nbsp;</div>

CSS :

.clear{
   clear:both;
   height:0px;
   overflow:hidden;
   border:0;
}

What do you think about it ?

Julien F.
  • 645
  • 4
  • 7
  • why would you use the second one? much more complicated – tckmn Dec 07 '13 at 15:36
  • 1
    Some people (my computer science teacher, for example) told me that it is the valid one because a DIV element can not be empty.. – Julien F. Dec 07 '13 at 15:37
  • 7
    Then you should get a better computer science teacher :P That's completely wrong. – tckmn Dec 07 '13 at 15:38
  • There was an issue with empty divs not respecting the `clear` CSS property in something like IE 5 or 6. About 10 year old information, sounds about the average CS teacher all right. – JJJ Dec 07 '13 at 15:39
  • You can also apply the clearing rules to pseudo-element like `::after`, that way you don't need extra markup – nice ass Dec 07 '13 at 15:41
  • possible duplicate of [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – JJJ Dec 07 '13 at 15:42
  • @onetrickpony Indeed; [this](http://nicolasgallagher.com/micro-clearfix-hack/) is the style used by bootstrap, for example. Note that you just need to add the class on the container that you want fixing, not on a non-semantic extra div in the source HTML. – Matt Gibson Dec 07 '13 at 15:44

2 Answers2

2

Actually both of them is pretty much the same. However the issue with both of them is the fact that you have to introduce an extra div, which pretty much not providing any value - content wise. I'm sure it is not the most semantic way to do it too.

You need to use "clearfix" to do this. If you google around, there's a lot of different ways to do a clearfix. But generally it uses pseudo element instead of empty divs.

Here's an example:

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

Then u just need to add the "clearfix" class to the parent element.

That example is taken from this post: http://css-tricks.com/snippets/css/clear-fix/ You can read more about it there.

Gaddafi Rusli
  • 320
  • 4
  • 19
  • Did you seriously just repost my answer? without even the clearfix the article recommends? Did you read it? – agconti Dec 07 '13 at 16:03
  • @agconti no, there was no answer when I was writing it down. It is in the article. there's few techniques there. we just use different ones. Just trying to help here. – Gaddafi Rusli Dec 07 '13 at 16:05
0

Look at this article on CSS Tricks for a detailed look on clearfixing elements across different browsers and different browser versions.

Here's the most up to date method:

.group:after {
  content: "";
  display: table;
  clear: both;
}
agconti
  • 17,780
  • 15
  • 80
  • 114