Question

I was reading this page here: http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/ about clearing floats without extra markup but it didn’t mention something I thought you could do.

Am I right in my thinking that you can also clear a float by just not floating the last element?

So if you wanted to float 3 elements, you float the first two and don’t float the last one…. the last one will still float but anything after won’t?

Answer 1

If elements in a container are set to float they will screw up.

Because the parent doesn’t know the height of the floated element in it (because it isn’t in the flow of the document anymore)

http://jsfiddle.net/CkdY6/

The best you can do is set the parent element to overflow: hidden

http://jsfiddle.net/CkdY6/1/

But as someone recently pointed out to me it will screw up when you want to use CSS3 stuff like a drop shadow.

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/