The Problem

If an element is set to float to the left or the right, it's containing element does not expand downward to include the contents of the floating element, as shown below.

Unfortunately this is seldom the desired goal. However, it is possible to change the rendering behavior of the containing element, to force it to expand downward, as shown below:

To change an element to exhibit the behavior featured above, simply click the float expansion button on the Remote Control, or manually a +float-expansion shortcut property to the rule's property list.

How Stylizer Handles Float Expansion

Stylizer essentially automates the industry-standard solution to this problem (known as "clear fix"). At the time of saving, the selector of each CSS rule containing the float-expansion property is collected, and 3 rules are created at the top of the underlying style sheet that adjust the float expansion behavior of all the necessary elements. Given the following information in Stylizer:

.a
{
	float-expansion: expand;
}

.b
{
	float-expansion: expand;
}

.c
{
	float-expansion: expand;
}

.d
{
	float-expansion: expand;
}

The following CSS is generated:

.a:after, .b:after, .c:after, d:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
.a, .b, .c, .d
{
	display: inline-block;
}
.a, .b, .c, .d
{
	/*\*/
	display: block;
	/**/
	_height: 1px;
}

With this method, it's possible to change the float expansion behavior quickly right from CSS. You don't need to follow the industry-standard practice of opening the underlying HTML, and appending a "class=clearfix" attribute to every element that needs to exhibit the expansion behavior.

Things you should know

While creating CSS, you should avoid the situation of elements spilling outside their containers, as it tends to introduce complications, especially when trying to make the design compatible with Internet Explorer 6 and 7. Liberal usage of the float-expansion property tends to cut down on browser compatibility complications.