CODEWITHSUNDEEP
css
Sam Saffron
Sam Saffron

Reputation: 131112

What is the best way to clear the CSS style "float"?

I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice.

There is a CSS hack (from position everything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead, you perhaps should look at this hack. But.. after reading through 700 pages of comments :) it seems there may be some places where the latter hack does not work.

I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.

What is the current best practice for clearing divs in a browser-independent way?

Upvotes: 60

Views: 62539

Answers (14)

alihardan
alihardan

Reputation: 350

Now, in 2021, you can use display: flow-root for parent element instead of clearfix hack.

.box {
  display: flow-root;
}

As of March 2021, 91.35% of browsers worldwide can handle display: flow-root, based on Can I Use data.

Upvotes: 5

user3808806
user3808806

Reputation: 1

<div class='float_left'>

something else


<br style="clear:both;">
</div>

this br will not leave a space.

Upvotes: 0

Bryan M.
Bryan M.

Reputation: 17322

Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by @RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher's micro clearfix:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Original Answer:

I really don't like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.

Obviously, it won't work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.

See more info on using overflow instead of clear to avoid adding extra markup.

Upvotes: 58

Kent Fredric
Kent Fredric

Reputation: 57354

there's a bit of voodoo I tend to find myself using. 

<span class="clear"></span> 

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
}

This combination magically fixes a whole host of browser problems, and I've just used it for so long I've forgotten what problems it solves.

Upvotes: 8

scottsanders
scottsanders

Reputation: 388

The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to float the parent to force it to adjust with the heights of its floated child elements, then apply your css clear to the next element you actually want to clear. It's often necessary to add width:100% too, as without floating the parent may unexpectedly change your layout.

As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br> or <div> with a clearfix class.

Upvotes: 1

shingokko
shingokko

Reputation: 412

I prefer using with .clear { clear: both; } over .clear-fix:after blah blah, because when you look at the markup it's clearer what's happening. Just FYI here's my tutorial on how to use float and clear that I wrote a while ago.

Upvotes: -1

its_me
its_me

Reputation: 11338

Simply adding overflow:auto; to the parent element containing the floating element(s) is an excellent fix in most cases.

SAMPLE HTML:

<div class="container">
    <div class="child">...</div>
    <div class="another-child">...</div>
<div>

CSS:

.child {
    float: right;
    word-wrap: break-word;
}

.child img {
    max-width: 100%;
    height: auto; /* of course, this is default */
}

.child p {
    word-wrap: break-word;
}

.container {
    overflow: auto;
}

As with any other method, there are some gotchas with overflow:auto; as well. In order to fix them — apply max-width:100%; height: auto; for images, and word-wrap: break-word; for text contained within the floating elements.

[source]

Upvotes: 3

Rodrigo Manguinho
Rodrigo Manguinho

Reputation: 1411

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

.clear-fix
{
    zoom: 1;
}

<div class="clear-fix">
    <div class="left">Some Div With Float</div>
    <div class="left">Another Div With Float</div>
</div>

In my opinion this is the best way. No need of extra DOM elements or wrong usage of overflow or any hacks.

Upvotes: 23

mrbinky3000
mrbinky3000

Reputation: 4291

.floatWrapper {
   overflow:hidden;
   width:100%;
   height:100%;
}
.floatLeft {
   float:left;
}


<div class="floatWrapper">
    <div class="floatLeft">
        Hello World!
    </div>
    <div class="floatLeft">
       Whazzzup!
    </div>
</div>

Upvotes: 1

user391990
user391990

Reputation: 95

The best way is put "overflow:auto;" in div container. It is more clean.

div.container {overflow: auto;}

more details in: http://www.quirksmode.org/css/clearing.html

Upvotes: 4

Billy
Billy

Reputation: 198

Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.

Upvotes: -1

Birk
Birk

Reputation: 2183

<br clear="all"/>

works well aswell. The benefit to this over using class="clear" is that it just works and you don't have to setup extra rules in your css to make it so.

Upvotes: -1

goldenratio
goldenratio

Reputation: 1026

jQuery UI has some classes to fix this as well (ui-help-clearfix does something).

Technically <div style="clear:both;"></div> is better than <br style="clear:both;" /> because an empty div will have 0 height, thereby just clearing the floats. The <br /> will leave a space. I see nothing wrong with using the <div/> method.

Upvotes: 2

Mike
Mike

Reputation: 398

I've found that most often (myself included), this method is used in the html:

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

With this in the stylesheet:

.clear {clear: both;}

Upvotes: 27

Related Questions