CODEWITHSUNDEEP
htmlcss
Julien F.
Julien F.

Reputation: 643

What is the best way to construct a clearer element in HTML/CSS?

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 ?

Upvotes: 0

Views: 133

Answers (2)

Gaddafi Rusli
Gaddafi Rusli

Reputation: 320

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.

Upvotes: 2

agconti
agconti

Reputation: 18093

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;
}

Upvotes: 0

Related Questions