I've seen both styles used interchangeably, but are they equivalent or is there some subtle difference (like with display: none and visibility: hidden)?

I did a search but all I got were style sheets using clear: both and float: none at the same time! :o

I'm not sure about the differences, but i use clear:both over preference. I'm not sure why :)

Clear both means that the div will come after both of the floated divs before it.

Float none, means it's no longer floated at all will appear in normal order, which may screw up other floats on same page.

I didn't know that powerMonster-Scott. I'm slowly getting into learning to create tableless CSS designs from my PSD's. Kinda hard to really find sites that deal with this, most sites talk about text style, creating boxes, colums but I don't see the big picture yet. Thanks for sharing this info.

Ah I see, thanks for the info!

Clear both means that the div will come after both of the floated divs before it.

Float none, means it's no longer floated at all will appear in normal order, which may screw up other floats on same page.Just to clarify slightly, clear:both means the element to which this style is applied will treat all preceding objects floated either left or right as block-level in regards to how it positions itself - meaning if it appears later in a page's markup, it will appear underneath right and left floated objects (any number of them).

I just wanted to explain the concept of "both" here. It's not up to two objects, but all objects floated in either direction. Its "plain English" translation would be clear all.

There are lots of resources on the web about floats. One great resource for css is meyerweb.com (eric meyers web site) and alistapart.com. Good luck!

float is used to determine the way of element floating while clear determines the side of element which should NOT be flown off.

So, float:none prevents element to move to the side and clear:both prevents other elements to flow off desired one.

Using float:none or clear:both may in some cases leads to the same result, but NOT always.

Clear both means that the div will come after both of the floated divs before it.

Float none, means it's no longer floated at all will appear in normal order, which may screw up other floats on same page.

Thanks A LOT for this!

Separating containers has been a nightmare for only 6 years now. I blindly used to use both and kept wondering why it works only half of the time.

:agree: