Clearing the floats

Question

Recently I have been using the <div style="clear:both;"></div> after each div element with the float: left/right attribute.

Now I'm in progress with the loop for the news system and want some elements to be floated to the right side.

The question is: is that a good practise to use the clear: both; attribute after each float(s)? Is there any nice replacement for that in case if I shouldnt use that?

My current HTML for the news looks like this:

<div id="news">
     <div class="date" style="float: right;">06-05-2013</div>
     <div style="clear:both;"></div>

     <div class="text">[...]</div>

     <div id="comment-block" style="float: right;">Comment on this news</div>
     <div style="clear:both;"></div>
</div>

I'm not sure why in this case you would even want to use floating element if they're immediately cleared afterwards. Why not just `text-align:right`? — JJJ, May 06 '13 at 08:33
@Juhanna This was just a cut , because the `#comment-block` div would have another div inside because it's an CSS3 button (with the image inside) and simple `text-align: right;` didn't work. — Lucas, May 06 '13 at 08:34
I would say what you are doing is excellent practice. It prevents some odd situations and allows you to roughly treat everything as if it were rendered inline. — ebolyen, May 06 '13 at 08:35
@btevfik I think this is a Typo. You could also use a `.clear` css class and add it directly to elements : `
[...]
` — Brewal, May 06 '13 at 08:38
@Brewal That is definitely another way to do this, but I feel sometimes it can be easy to miss later on, while a div that clears is fairly obvious. — ebolyen, May 06 '13 at 08:40
You need to clearing div if you want that div (or the ones after it) to not align themselves next to the floated elements. Does this answer your question? — Salman A, May 06 '13 at 08:56
This question is probably best answered at http://stackoverflow.com/questions/211383/#answer-1633170 — xec, May 07 '13 at 10:17

score 2 · Accepted Answer · answered May 06 '13 at 08:52

2

In my opinion better solution is

HTML:

<div id="news">
    <div class="group">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
</div>

SCSS:

.group {
    &:before, &:after {
        content:"";
        display: table;
    }
    &:after {
        clear: both;
    }
    .lt_ie8 & {
        zoom: 1;
    }
}

answered May 06 '13 at 08:52

Tarun

1,888
3
18
30

I know IE7 is **old** but still thought it was worth mentioning that using `:after` will not work in IE7 without an additional library like [mentioned here](http://stackoverflow.com/a/8894979/1676444). – Turnerj May 06 '13 at 08:55
That's why i'm using .lt_ie8, we normally use for ir cross browser problem. This code will work in IE6+ – Tarun May 06 '13 at 09:35
@Tarun How is that lt_ie8 class name added? Also, seeing as the question is tagged CSS (not SCSS) consider posting pure CSS, for future readers? – xec May 07 '13 at 06:41

score 1 · Answer 2 · answered May 06 '13 at 08:47

Ultimately it depends on what you are trying to accomplish.

If you have some nesting of relatively positioned elements, and you want some inner children to be positioned on the left or right without affecting other children, then a float and immediate clear is one of the saner ways to accomplish this.

Other ways might be to use position absolute, or margins and a fixed width. But neither of these is ultimately as flexible as just asking the browser to put it on the right and then render inline with a clear.

coma · Answer 3 · 2013-05-06T09:15:03.707

Well, you can:

http://jsfiddle.net/qzbNr/6/

CSS

div.floats {
    padding: 10px;
    background-color: #eee;
    margin: 10px 0;
}

div.floats > div {
    float: left;
    width: 20px;
    height: 20px;
    background-color: #333;
}

div.floats > div + div {
    margin-left: 10px;
}

div.overflow-hidden {
    overflow: hidden;
}

div.box-sizing {
    width: 100%;
    box-sizing: border-box;
}

div.known-width {
    /* 200px - 2 * 10px of padding */
    width: 180px;
}

div.calc {
    width: calc(100% - 20px);
}

div.after-pseudo:after {
    content: "";
    display: block;
    clear: both;
}

div.clear {
    float: none !important;
    clear: both !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

HTML

<div class="floats overflow-hidden box-sizing">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden known-width">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden calc">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats after-pseudo">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats extra-markup">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

The overflow approach is messy, the trick is overflow hidden and defined width, you'll need to take care about the box model sizing and if you want something getting out like a tooltip or so, you'll be in troubles, but beside that is a classic, works pretty well.

The pseudo approach is the best IMHO, in fact I always have a .clear:after in my CSS.

The extra-markup approach is the worst since you need to add elements that don't mean anything and take care about other styles applying width !important or so.

score 0 · Answer 4 · answered May 06 '13 at 08:51

0

Depends what you want your site to look like. Generally, clearing floats is quite important for the parent element to have it's height set correctly.

I will note however it may be more useful to you to use a class for clearing the elements over an inline-style.

Try something like this:

.clear
{
    clear:both;
}

And just use:

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

This way, it allows you to perform or tweak any other styling you want for your clearing divs without manually having to edit the inline style to each one.

answered May 06 '13 at 08:51

Turnerj

4,258
5
35
52

It's all well saying it is "very bad" to use `clear` as a class name however I don't really see an alternative and it's not like you gave any suggestions. Would you prefer `clearFloat` or `clearFix`? The class name `clear` (and variants of) is ubiquitous, major frameworks like Bootstrap and HTML5 Boilerplate both use `clearfix`. Class names like these allow Javascript to dynamically change how the page flows which may or may not be important depending on the situation. [Lets avoid being semantic for the sake of it](http://www.impressivewebs.com/avoid-nonsemantic-classes/) – Turnerj May 06 '13 at 11:24
A quick google for "clear float without markup" will give plenty of decent alternatives, or have a look at the answer I posted to this question. While I agree that semantic markup is not the end-all be-all that some (read: most) webdevelopers swear it to be, there is absolutely no reason to recommend presentational markup where none is needed. There is also value in having semantic classnames - maybe "clear" is referring to the weather in a forecast? If you decide to change the layout using CSS you would need to remove the clear: both; from the clear class, making the html completely pointless – xec May 06 '13 at 14:06

xec · Answer 5 · 2013-05-06T09:21:17.020

Sometimes, clearing a float is indeed the right/best thing to do, but inline styles are (almost exclusively) bad, and css classes should be named after meaning rather than style. One of the strongest abilities of CSS is to separate content from presentation.

It is almost always better to contain a float rather than using clearing, and it is always better to contain rather than use inline styles or non-semantic class names.

There are several ways of containing floats, by creating a Block Formatting Context -- see https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

More information and a quick tutorial at http://colinaarts.com/articles/float-containment/ (especially the "what not to do" section)

That said, all you need to achieve the same layout in the specific case of your question is to align the text, like @Juhana commented. Sample code;

HTML

<div id="news">
     <div class="date">06-05-2013</div>
     <div class="text">[...]</div>
     <div class="comment-block">Comment on this news</div>
</div>

CSS

.date,
.comment-block {
    text-align: right;
}

score 0 · Answer 6 · answered May 06 '13 at 09:15

USE CLEARFIX Link here http://www.webtoolkit.info/css-clearfix.html

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




    <div id="news">
    <div class="group clearfix">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group clearfix">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
   </div>

Clearing the floats

6 Answers6

HTML

CSS