Testing out the floats

Scenario 1

This is an experiment to see how floats work! This very paragraph is in the normal flow. The floating elements are first laid in the normal flow and then taken out of normal flow to float as much as possible to the left or right, as specified.

This text is insided a floated box, Note floated box's margin/borders *do not* collapse. This floated div has a 3 pixel red border More text here is just to show that this float element hangs out of this container box. Lets see what happens if the float element hangs out.

This text is supposed to wrap around the floating element. And wrapping text runs down the flow to fill the space beneath the floated box. The borders, background and margin of this text just go beneath the floated element, they do not shift left/right to the floating element.

What happens if a float element is overflowing?

So, you can see in scenario 1 above, that as soon the content of the floated element is bigger (taller) than the space taken by the normal flow elements, the floated elements starts to hang, hang out of the container box.

In scenario 2, we are having a fix as to how to make the container fill upto the space of the hanging float element

Scenario 2

So you can see here in sceanrio 2, we added a class called "clearfix" to the container element so now it contains (expands) the hanging float element.

            .clearfix:after {
               display:block;
               clear:both;
               height: 0;
               visibility: hidden;
               content:'.';
            }

Note: If you are viewing this scenario 2 in IE, the desired expansion might not have happened, because IE simply doesn't have the ":after" pseudo class, which came out of CSS2 spec from W3C. There is some property in IE browser called "hasLayout" which need to trigger to do this container expansion. IE says,

 zoom:1;

triggers this "hasLayout" property & hence use of that will have the desired effect. Scenario 3 should appear correctly in IE

Scenario 3 (IE specific hack applied for expanding the container element).

So you can see here in sceanrio 3, that when IE specific hack applied, which is

            .clearfix {
               zoom: 1;
            }

things seem to work.

Scenario 4 (What happens if an inline element is floated?).

This is a span element with float applied. Any inline element becomes a block element on applying float. Inline elements are just meant to come in the flow of text, they do not have dimensional properties (height, width, margin?, border?). So, what happens if a border, background, width etc applied to an inline element such as this span? Ok, so inline elements succumb to line-height. This span has a margin of 50px applied, try applying a padding of 50px to this span element (if incase you have firebug extension & in firefox).

Summary of float

"float" takes two values
float:left;
float:right;

If first, second and third child inside a container parent (outermost container is the <body> element) are floated left, then the first child of the parent is floated to the leftmost and followed by the second child floated as much left as possible (in this case, after the first child -- floated elements form the boundary), followed by the third child which floats next to the second child.

Once an element is floated, the rest of the elements following the floated element (even if they are not floated), start wrapping next to the floated element in a horizontal fashion. If for some reason, this clinging is not necessary, then use the concept called "clearing the floats"
clear:both; is used for clearing both left and right floating; clear:left; clear:right; are its other values.

Experiment with floats

Create a 3 column layout using floats.

What is inline box model?