This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. Since floats are not in the flow, block boxes created before and after the float flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float.
A floating element's top may not be higher than the top of any earlier floating or block-level element.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is not enough horizontal room for the float, it is shifted downward.

According to the sequence in the source code, floats are stacked in front of boxes in the normal flow (see z-index).

Depending on the width of the wrapper, IE 6 and 7 may fail to properly compute the total width value and thus create a "drop float".

One should use display: inline; on floats to prevent the IE6 double margin bug (though the computed value would be block).

Try These

Watch This


Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).