Managing a floated div inside its parent container

[mgm_03]

As far as I understand, when a floated div is inside a parent container, it can "spill out". The two options to correct this are to 1) Float the parent container as well. 2) Add the "clearfix" class to the parent container.

Is this correct? If yes, when to use one or the other approach? If this is explained elsewhere, pls re-direct me. Thanks!

[Dan Schulz]

I don't use floats that way. I also suspect you're having a problem with one of your pages. What does your code look like?

(PS: I also never, EVER, suggest using clearfix for ANYTHING.)

[mgm_03]

The float in a float is working for me and I picked that tip up from a book Pro CSS techniques by Apress. I was just wondering if that approach was better/worse/neither compared with using clearfix.

I have never had luck with the clearfix but assumed I was implementing incorrectly. Clear:both works just fine.

[markbrown4]

I was just wondering if that approach was better/worse/neither compared with using clearfix.

Floating is a good solution, all browsers understand it - and it's just one simple property. My guess is Dan has a gripe with the clearfix method because it uses invalid CSS. Go with the simplest method that works.

I personally prefer to use the overflow property to clear floated child elements. auto or hidden depending on the circumstance.

[Centauri]

What the heck is "clearfix" ?

[Dan Schulz]

My gripe has to do with adding pointless HTML to a page when the element under the floated one(s) can do the job just as well.

[Dan Schulz]

<br class="clearfix" />

.clearfix {
clear: both;
overflow: auto;
}

[markbrown4]

You mean:

.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
/* mac hide \*/
	* html .clearfix {height: 1%;}
	 .clearfix {display: block;}
/* End hide */

In the FAQ on floats

And it's not meant to be applied to an element like br - you don't understand it's purpose properly.
When you apply class="clearfix" to an element it will clear itself after the element.
Like in the example provided:

<div id="outer" class="clearfix">
<div class="floatedstuff">
	<p>Floated content to be cleared</p>
</div>
</div>

It kind of adds a <div style="clear: both"></div> after the element you specify.

[Dan Schulz]

Oh, I understand it. Many others don't. And I've seen the BR element abused like that far more often than many realize.

I'm just against adding more markup to the code than is absolutely necessary is all. Even classes such as "clearfix".