Is Clearfix still valid?

Is the Clearfix code below still valid or relevant??


/* Allow Container Box to "clear" a Floated item. */
/* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
.clearfix:after{
	content: ".";															/* Append a period to element. */
	display: block;														/* Set as Block element. */
	clear: both;															/* Apply clear to move Container Box below Float. */
	height: 0;																/* Keep period from showing. */
	visibility: hidden;												/* Keep period from showing. */
}

/* IE and Mac fix */
.clearfix{
	display: inline-block;
}

/* Fixes bug in Opera which doesn't usually like 100% height.
		We move the float way above the viewport out of the way of everything. */
.clearfix{
	display: block;
}

/* What does this do? */
/*Opera Fix*/
body:before{																/* thanks to Maleika (Kohoutec)*/
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
}


Debbie

This thread may be of interest:

There seems to be a lot of tinkering needed to get this just right in all browsers in all circumstances.

From memory, the suggestion from that thread was to use the third version on this page:

http://www.tjkdesign.com/lab/clearfix/new-clearfix.html

How well versed are you on this topic?

I could use some help understanding code that Paul O’ shared with me that seems to work but which doesn’t mean much to me…

Debbie

The clearfix:after part adds some pseudo content at the end of the conatiner, which forces the container to wrap around any floats to contain the pseudo content. That pseudo content (be it a period or just blank space) is hidden so that it won’t have any visual effect on the layout.

The rest of the code is to massage certain browsers in the right direction. That’s the best I can do.

I personally consider clearfix to be poor man’s fix-it-all CSS class. Sure it works, but if you do everything correctly there is absolutely no need for it.
For example you can also add an overflow other than visible (the default) to a container and it will close properly. There are some others like float left, but in most of the cases you can use overflow just fine and don’t need to resort to other measures.

So, is it valid? Sure, it works and will probably work for a long time to come.
Is it recommended? No, I don’t think it is.

So maybe you can help me write better code?? :-/

Here is a link to my test website.

The code is largely from Paul O’ and it works just fine, but I am trying to clean it up and get a better grasp of what the code actually says, because if you asked me to code this on my own a year after Paul O’ and others helped me out here on SitePoint, I’d be screwed!! :eek:

Debbie

I’m trying to get my brain around this code after not having looked at it for over a year…

As I recall, Paul O’ helped me create a Max-Min, 3-Column, Colored Full-Height Columns, Fluid Design with Sticky Footer. (I ended up ditching the Color, Full-Height part.)

In the stripped down sample above, I have…

  • pageWrapper
  • pageInner
  • pageHeader
  • pageLeftCol
  • pageMidCol_3
  • page RightCol
  • pageFooter

With a 3-column layout, pageInner ends up be 400px too wide and so I use a negative margin of 400px to compensate.

In main.css I have…


/******************************************************************************/
/* MISC STYLES																																*/
/******************************************************************************/

/* Allow Container Box to "clear" a Floated item. */
/* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
.clearfix:after{
	content: ".";															/* Append a period to element. */
	display: block;														/* Set as Block element. */
	clear: both;															/* Apply clear to move Container Box below Float. */
	height: 0;																/* Keep period from showing. */
	visibility: hidden;												/* Keep period from showing. */
}

/* IE and Mac fix */
.clearfix{
	display: inline-block;
}

/* Fixes bug in Opera which doesn't usually like 100% height.
		We move the float way above the viewport out of the way of everything. */
.clearfix{
	display: block;
}

/* What does this do? */
/*Opera Fix*/
body:before{																/* thanks to Maleika (Kohoutec)*/
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
}

I have some similar (read “redundant”) code in my top_menu.css for the pageHeader, but maybe we can focus on the first clearfix above?

(I know I saw some tirade by DeathShadow - there’s a surprise :wink: - about how ClearFix is unnecessary. All I care about is that my website works on IE6 forward and all other major browsers and versions…)

Thanks,

Debbie

That page -no offence- looks like your garden variety three column layout, of which Paul O’B has a great example here: http://www.pmob.co.uk/temp/3col-overflow-toggle.htm :slight_smile:

Anyway, why do you want to recode a page that you built a year ago, that was “given” to you by Paul O’B no less?

I never said it was anything special, but it is still “complex” to my tiny little brain… :blush:

Anyway, why do you want to recode a page that you built a year ago, that was “given” to you by Paul O’B no less?

I wouldn’t say “given”…

Paul - and others - spent a fair time helping me understand things and tweak things, but I did a lot of legwork too!

Why recode it?

1.) Because I don’t truly understand all of the code and never got answers to many of my commented questions.

2.) Because I want to really understand each line and be able to code it on command. (I can do that with some of it, but not all of it like the ClearFix stuff.

3.) My CSS has grown messy and needs to be improved.

4.) I want to code HTML/CSS the way it should be (e.g. using <em> instead of <div>)

5.) I have some “bugs” that I can’t figure out (e.g. getting rounded corners to work on some parts you can’t see yet) and that is a sign that my code has turned to crap

So are you gonna help me get better or what?! (:

Debbie

That’s why you have your other thread right now, isn’t it? :wink:

That’s the same as 1.), but phrased differently

The way to improve is not to do the same thing over and over again, but trying something new every time (IMHO), and to take a look at what others did and their solution applies to what you want to do.

That’s about semantics and has nothing to do with CSS. There are a lot of good threads in the HTML and XHTML forum you can read about this, e.g., [URL=“http://www.sitepoint.com/forums/showthread.php?790568-lt-strong-gt-or-lt-b-gt”]<strong> vs <b>

How do you expect people to help with stuff they can’t see? :eye:

Yes, but ClearFix seems like a large enough topic to create a new thread… :wink:

The way to improve is not to do the same thing over and over again, but trying something new every time (IMHO), and to take a look at what others did and their solution applies to what you want to do.

Right!

So how about showing me how I can 86 the ClearFix and use something better…

That’s about semantics and has nothing to do with CSS. There are a lot of good threads in the HTML and XHTML forum you can read about this, e.g., [URL=“http://www.sitepoint.com/forums/showthread.php?790568-lt-strong-gt-or-lt-b-gt”]<strong> vs <b>

That’s why I said HTML/CSS, and it was just an example to answer your question…

How do you expect people to help with stuff they can’t see? :eye:

I posted both my ClearFix code and a url to my test website.

What specifically did you want?

Debbie

Answering your question, .clear:fix is still valid. Much in the same way a bi-plane is still a valid airplane.

Just because, something gets old, doesn’t mean it becomes invalid… or that it still doesn’t have its applications ( crop dusting, for example).

If you want to clear floats ( and do not just happen to have an element below the float to which you could give clear:both)… first thing to use theses day is giving the CONTAINER overflow:hidden/auto; Yup, that’s it and it’s probably what you heard Paul OB mention since I believe it was his own discovery. It really is quite handy a method, as it TOTALLY cross browser friendly, logical and one declaration long.

It’ has one drawback. That is you cant move thing out of the container if you use this method.

The alternative some have suggested… is (instead of overflow:hidden; ) use display:table; again this clear all contained floats… JUST LIKE overflow auto and allows for things to overflow the container when needed ( as in positioning or negative margins)

What’s the catch? Am glad you asked. First there are certain inherent problems with margins/AP when it comes tho children of tables. These are ,essentially, the same reasons why you cant AP a TD, or control its " margins" ( note I put that word in quotes) as you would a block element.

ALSO IE HAS TO BE A HEADACHE… It wouldn’t be IE otherwise. Legacy IE (lt 8) doesn’t get display: table. :/. So if you have to overflow a container for positioning purposes, then we have in a sense come full circle.

One way to get around this is to use display: inline-block for legacy IE and some fixes.

However I have gotten into the habit of SPLINTING the two (three) cases.

  1. Container with floated elements and a FINAL non floated element which appears below all the others… JUST give the final element clear both… I mean REALLY… why go through any more haste.
  2. The same as above but w/o any non floated element to appear below all neatly contained in one wrapper. This means no AP outside the wrapper or elements protruding through negative margins. Simple overflow:hidden; will do in this case.

For anything that doesn’t fit these criteria I have developed this method:


.raysCF:after, .raysCF .after {
content:"";
display:block;
clear:both;
zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	
/*not found to be necessary but I inclculde this  JIC*/
	visibility: hidden;
	line-height: 0;
	height: 0;
}

IDEALLY… I would actually use .raysCF>.after… but that would limit support to IE gte 7. So at this point I either do that or keep in mind that I am creating faux pseudo elements for legacy IE. And that generally covers all the bases.

I hope that sheds some light on the subject for you.

dresden_phoenix,

I feel dizzy

Thanks for your response, but I feel like this is going over my head quickly.

Before I look at tweaking what I have, can you please comment on my current layout?

Here is index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->
	<!-- HTML Metadata -->
	<title>Debbie's Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- Page Stylesheets -->
	<link type="text/css" rel="stylesheet" href="css/_main.css" />
	<link type="text/css" rel="stylesheet" href="css/_layout.css" />
	<link type="text/css" rel="stylesheet" href="css/top_menu.css" />
</head>

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			<!-- BODY HEADER -->
			<?php	require_once('components/body_header.inc.php');	?>

			<!-- LEFT COLUMN -->
			<div id="pageLeftCol">
				left
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
				euismod metus.

				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
				condimentum sed, dignissim vitae quam.
			</div><!-- End of #LEFT -->


			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_3">
				middle
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
				euismod metus.

				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
				condimentum sed, dignissim vitae quam.
			</div><!-- End of #MIDDLE -->


			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">
				right
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
				euismod metus.

				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
				condimentum sed, dignissim vitae quam.
			</div><!-- End of #RIGHT -->

		</div><!-- End of #INNER -->
	</div><!-- End of #WRAPPER -->

	<!-- BODY FOOTER -->
	<?php	//require_once('components/body_footer.inc.php');	?>
</body>

</html><?php //Build Date: 2011-11-12 ?>

And here _layout.css

/******************************************************************************/
/* PAGE LAYOUT STYLES																													*/
/******************************************************************************/
#pageWrapper{
	position: relative;												/* Create Containing Block. */
	z-index: 0;																/* Place below other elements */
	min-width: 760px;
	max-width: 1200px;
	min-height: 100%;													/* WHAT IS THIS?? */
	margin:	0px auto;
	margin-top: -60px;												/* Make space for Footer. */
	background: #FFF;													/* Fill-Color for short Middle Column. */
	text-align: left;	/* ??? */
}

/* Holds 3 Columns and hides portion sticking out to the right. */
#pageInner{
	position: relative;												/* Create Containing Block. */
	z-index: 3;																/* Raise above Colored Columns. */ /* NEEDED?? */
	width: 100%;
	overflow: hidden;													/* Hides Middle Column hanging outside of viewport. */
}

#pageHeader{
	position: relative;												/* Create Containing Block. */
  z-index: 3;																/* Raise above Colored Columns. */ /* NEEDED?? */
	clear: both;															/* PURPOSE??? */
	width: 100%;															/* Width of Viewport. */
	padding: 0;																/* NEEDED?? */
	color: #000;															/* NEEDED?? */
	background: #FFF;													/* NEEDED?? */
	border-top: 60px solid #F00;							/* Compensates for negative margin in Wrapper
																								which was used to make way for Footer. */
}

/* All 3 columns below are floated left.
		Left Col is 200px wide.
		Middle Col is 100% wide and thus extends 200px beyond viewport.
		Right Col is 200px wide and thus extends 400px beyond viewport.
		Middle Col has -400px Right Margin to move Right Col back into viewport. */
#pageLeftCol{
	position: relative;												/* Create Containing Block. */
	z-index: 2;																/* ????? */
	float: left;
	width: 200px;
	overflow: hidden;													/* NEEDED?? */
	font-size: 0.8em;													/* NEEDED?? */
}

#pageMidCol_3{
/* By floating the Middle Column we avoid the IE6 3 pixel jog and also keep
		columns in normal source order (i.e. Left, Middle, Right), but we need
		to use a negative margin offset to make it all fit. */

/*	position: relative;											/* Why doesn't this exist? */
/*	z-index: 2;															/* Why doesn't this exist? */
	float: left;
	width: 100%;															/* Width of Viewport. */
	margin-right: -400px;											/* Compensate for 200px Left & Right Columns. */
}

#pageMidCol_2{
	/* Each of the two columns are floated left.
			Middle Col is 100% wide and thus extends to the edge of the viewport.
			Right Col is 200px wide and thus extends 200px beyond viewport.
			Middle Col has -200px Right Margin to move Right Col back into viewport. */

/*	position: relative;											/* Why doesn't this exist? */
/*	z-index: 2;															/* Why doesn't this exist? */
	float: left;
	width: 100%;															/* Width of Viewport. */
	margin-right: -200px;											/* Compensate for 200px Right Column. */
}

#pageMidCol_1{
/*	position: relative;											/* Why doesn't this exist? */
/*	z-index: 2;															/* Why doesn't this exist? */
	float: left;
	width: 100%;															/* Width of Viewport. */
}

#pageRightCol{
	position: relative;												/* What does this do? */
	z-index: 2;																/* What does this do? */
	float: right;
	width: 200px;
	overflow: hidden;													/* Why doesn't this exist like in LEFT?? */
	font-size: 0.8em;													/* NEEDED?? */
}

#pageFooter{
	/* This is located BELOW the wrapper. */
	position: relative;												/* What does this do? */
	z-index: 2;																/* What does this do? */
	clear: both;															/* NEEDED?? */
	min-width: 760px;													/* Same min-width as #wrapper. */
	max-width: 1200px;												/* Same max-width as #wrapper. */
	height: 60px;															/* Must match Negative Top-Margin in #wrapper. */
	margin: 0 auto;														/* NEEDED ?? */
	text-align: center;
	font: normal 14px/15px arial,helvetica,sans-serif;		/* NEW */ /* How does this affect Total Height of 60px?? */
	color: #000;
	background: #DDD;
}

And here is main.css which contains the ClearFix styles at the bottom of the code. (Note: I have some more extraneous ClearFix code in my top_menu.css file, but let’s save that for later?!)

/******************************************************************************/
/* GENERAL STYLES																															*/
/******************************************************************************/
*{
	margin: 0;
	padding: 0;
}

html,
body{
	height: 100%;															/* For IE6 ???	Will expand beyond 100% */
}

body{
	font-family: Helvetica, Arial, Sans-Serif;
	line-height: 1.4em;
	font-size: 0.9em;
	background: #FFF;
}

h1, h2, h3, h4{
	padding: 0.5em 0 0 0;
	text-align: center;
}

p{
	padding: 0.5em 1em;
}





/******************************************************************************/
/* HEADER STYLES																															*/
/******************************************************************************/
#logo{
	float: left;
	margin: 0.5em 18px 1em 0;
}

#topMenu{
	clear: both;
}


/******************************************************************************/
/* FOOTER STYLES																															*/
/******************************************************************************/
#footer ul{
	list-style: none;
	padding: 22px 0 23px 0;
}

#footer ul li{
	display: inline;
}

#footer ul li a{
	margin: 0 1em;
}


/******************************************************************************/
/* MISC STYLES																																*/
/******************************************************************************/

/* Allow Container Box to "clear" a Floated item. */
/* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
.clearfix:after{
	content: ".";															/* Append a period to element. */
	display: block;														/* Set as Block element. */
	clear: both;															/* Apply clear to move Container Box below Float. */
	height: 0;																/* Keep period from showing. */
	visibility: hidden;												/* Keep period from showing. */
}

/* IE and Mac fix */
.clearfix{
	display: inline-block;
}

/* Fixes bug in Opera which doesn't usually like 100% height.
		We move the float way above the viewport out of the way of everything. */
.clearfix{
	display: block;
}

/* What does this do? */
/*Opera Fix*/
body:before{																/* thanks to Maleika (Kohoutec)*/
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
}


This code appears to work “as-is” - although I’m lame and haven’t tested it on IE since I am on a Mac!

Can you (and others) please comment on how I have things laid out and styled? (Most of this was taken from Paul O’ and then tweaked and I added lots of comments to make it clearer, but some things like ClearFix and “clearing floats” still kinda confuse me?!) :blush: :blush: :blush:

Thanks,

Debbie

Except that it makes the element an inline block and content will try to go alongside would there be room. It also introduces the whitespace bug between elements like the gaps between words because that’s what the element effectively becomes.

However if you are using it on a page wrapper then those problems probably won’t have any effect.

Also remember that inline-block is also subject to the text-alignment of the parent.

breeeeeeeathe.

It’s a matter of THOUGHT not really of code ( actually this is true of all CSS solutions).

Let’s examine what .clearfix does, shall we? Actually, it’s best to think of what used to be done before someone came up with .clearfix.



#sidebar {float:left; width:250px;}
#content {margin-left:250px;  /*OR  simply float:right: width:550px;*/}
<div id="container">
   <div id="sidebar">floated left</div>
   <div id="content"> possibly floated right</div>
</div>

In the above example , because the children elements were floated and thus taken OUT of the FLOW, #container would collapse. This means if you had a background in #container you wouldnt be able to see it… :(. To solve this poroblem, what you needed was another element that came after wards in the code…to CLEAR the float(s). This was simple if you had another hand element with content:



#sidebar {float:left; width:250px;}
Content {margin-left:250px; /OR simply float:right: width:550px;/}
#convenientContent{clear:both;}
<div id=“container”>
<div id=“sidebar” style="f>floated left</div>
<div id=“content”> possibly floated right</div>
<div id=“convenientContent” >Convinently we just had extra content to go here… bellow the main content AND sidebar</div>
</div>



Wow... that solved it. 

But what if we didn't have anything to say after the main content and sidebar?  no convenient content!?!? Well then  peopel just left teh element  BLANK  as a clearing element .


#sidebar {float:left; width:250px;}
Content {margin-left:250px; /OR simply float:right: width:550px;/}
.clear{clear:both;}
<div id=“container”>
<div id=“sidebar” style="f>floated left</div>
<div id=“content”> possibly floated right</div>
<div class=“clear” ></div>
</div>



It works.. but then that meant that you had to have this BLANK element, simply for the sake of presentation each time you needed to clear a float... UGH, right? 

Well  around that point :before /:after  came into play and utilized in  clever FIX.

.CLEARFIX essentially GENERATED that "    <div class="clear" ></div>" of the above example w/o  the need  to have  that extra mark up.


#sidebar {float:left; width:250px;}
Content {margin-left:250px; /OR simply float:right: width:550px;/}
.clearFIX:after{content:“”; display:block; clear:both;}
<div id=“container” class=“clearFIX”>
<div id=“sidebar” style="f>floated left</div>
<div id=“content”> possibly floated right</div>
</div>



SIGH...  it had some quirks with early versions of opera( i wouldn't worry about those anymore ) and OF COURSE IE  didnt support the VITAL :after element.

So what would have been a simple elegant solution started requiring all sorts of hacks and  extra code.. ( which is what you showed in your example) ... but I won't delve into those now. 

note that other than adding the class "clearfix" YOUR markup is still  clean.  Heck techincally, if you wanted to be like DS60, you could just apply those rules directly to where they are needed (in my example that would be #container{content:""; display:block; clear:both;})  and you wouldn't even have to add the class!



I personally go around IE *****yness by using IE specific features ( heck since it was an IE mostly problem why not solve it with IE code.. right?) 


Thus MY version of clearfix was :

.raysCF:after, .raysCF .after {
content:“”;
display:block;
clear:both;
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML(‘beforeEnd’,‘<span class=“after”></span>’)
);/this is IE speck for make a span with class=“after”, only IE understands this but then again only IE needed it. CONVENIENT/



Simple. No HACKS.. kinda. 

What I am saying is, if you used clearfix, and chose to remove it from your CSS stylesheets. you should have anything to remove from your HTML :)  ( except maybe,  class="clearfix")

But you will need some OTHER WAY  to clear floats  to apply to containers.


ENTER PAUL OB and {overflow:hidden;}...  

One attribute to add, works on ALL browsers!! WOW Paul, way to overachieve!  

The onlly issue I was mentioning with this, if that you need content to overflow, let say in the case of a drop down menu... for example. OVERFlOW:HIDDEN will  hide anything that would otherwise textend past the container...  ( your drop downs will be cut off.. ouch!!)

you you must adapt for those occasions:

The way I do it  to use: display: table; instead of overflow: hidden; ( if I dont need to AP any direct children of the container , for example in a  logo)
 or if I do THEN I go back and used my modified version of CLEARFIX.  Think of it as a handy last resort.

Trying.

But you will need some OTHER WAY to clear floats to apply to containers.

ENTER PAUL OB and {overflow:hidden;}…

One attribute to add, works on ALL browsers!! WOW Paul, way to overachieve!

I don’t follow where to add that one line?

And are you sure that one line does everything that the standard 20 lines of ClearFix do?

I read a couple of threads on this topic, but am unsure which one is the most current and works for all current and past browsers.

You make it sound like one fixes everything?!

Debbie

On the same element to which you’d apply clearfix. So, if you want a container to wrap around its floated innerds, use

.container {overflow: hidden;}

And are you sure that one line does everything that the standard 20 lines of ClearFix do?

Yes. Its one downside, as d_p said, is that if you want some element to hang out of the container (like a fancy logo with a negative left margin, for example), it will get cut off, but that’s fairly rare.

Exactly, ralph.

And that’s what I meant there is no substitute for observation and thought.

f you want some element to hang out of the container (like a fancy logo with a negative left margin, for example), it will get cut off, but that’s fairly rare.
On THOSE rare occasions a clear fix type solution may come in handy. or perhaps a “display:table” OR you may realize you have an available element to which you can apply {clear:both} in which case you DONT NEED ANY of these clearing solutions anyway.

:slight_smile:

I’ll jump in now and confuse the issue some more:)

The magic of overflow (other than visible) is that it creates a [B]new block formatting context[/B] and then the element must take care precisely of all its children and take them all under its wings. This is why overflow:hidden makes the parent encompass the children but this is not the only property that will do that. Absolute elements will encompass their floated children as will floats and elements that are inline-block or display:table. The full list is of properties that create new block formatting contexts [URL=“http://www.w3.org/TR/CSS2/visuren.html#block-formatting”]are listed here.

Which property you use is depends n circumstance as all have side effects with overflow:hidden being the best when you don’t need visible overflow and when you don’t want content cropped as in a fluid layout.

In my original example that you based your code on I used the clearfix method because of the sticky footer routine where opera and ie8 didn’t like overflow:hidden being used and also the fact that you may have wanted visible overflow.

As many have said above you don’t need to actually add the clearfix class to the html but you can apply the rules directly to the elements that need it. However for beginners its easy to code it once and then just add the clearfix class to elements that need it.

There is no one silver bullet for clearing floats and there is no best method. You use whatever method suits the dynamics of the job in hand.

Debbie, please take no offence, but you over think things. I know this because I do too. But with CSS this causes problems. I at one time also thought there was a best and one correct way to do things. But with CSS 9 times out of 10 there are quite literally ten ways to do the same thing. Sometimes there is a preferred way. But often times, as with this, there is only preference. There are numerous ways to contain floats and none work in all situations (I would imagine). So it simply boils down to whichever method you prefer. I’ve used them all depending on my mood and the situation. Here are all the available methods to contain floats http://www.visibilityinherit.com/code/contain-floats.php. Pick one and run with it.