Clearing Float Explanation :after

HTML & CSS
1

Hi all

Can somebody please explain why a client is using the below and what this achieves.
I need to continue a build and just wondering is this a browser specific snippet of code needed for IE?

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

Many thanks, Barry

2

It looks like one of the many methods going around to “enclose” floats. By nature, a container element (like a div) won’t enclose (or wrap around) a floated child element. Placing some generated content (in this case, a period, via :after) at the end of the .subNavigation element will cause it to wrap around any other floated child elements. This is done for all browsers. There are easier methods, such as replacing all that code with

.subNavigation:after {overflow: hidden;}

which suffices in most situations.

3

I think Ralph meant: :slight_smile:


.subNavigation {overflow: hidden;}

is this a browser specific snippet of code needed for IE?

No that is actually for everyone except IE6 and 7 as they don’t understand :after. However IE6 and 7 only need haslayout in order to contain floats so you must ensure that the element has a layout which can be done by applying a dimension or using the more efficient but proprietary zoom:1.0. You can read more on the clearfix technique here.

4

[ot]

Yes, thanks Paul: a cut and paste fail. Also should have explained the extras details about clearfix.[/ot]

5

Thanks, just what I thought.
I use .example {overflow: hidden;} heavily myself but didn’t realize this didn’t work for IE 6/7, surprised I haven’t see this, never seemed to have any problems before…

It might be best if I just leave these in place for now and use the more correct way on future builds.

Thanks for your input and link, Barry