Float

Floating Boxes

The normal flow of element rendering can be changed if there are floating objects. The floating objects can be defined using HTML code with align attribute for the HTML element that accept it or by css code using the float property.

The possible values are

PropertiesDescription
nonegenerates a box that is not floated.
rightgenerates a box that is floated to the right
leftgenerates a box that is floated to the left
Example
img{ float: right } /*makes all images to float on right*/
ul{ float: left }  /*makes all unordered lists to float on left*/
How it Works

When float object is met, the following things happen.

-The normal flow is stopped, and the browser puts a virtual marker to indicate the point where the normal flow was stopped -The floating object is rendered in the specified position (right or left), starting on the next line with the default or specified dimensions -The normal flow continues from the virtual marker, and all the remaining objects are rendered using all the empty space left after rendering the floating object

snippet
<html>
<head>
</head>
<body>
    <div>
        <img url="star.png" style="float:left">
        <ul style="float:right">
            <li>item 1
                <li>item 2
                    <li>item 3
        </ul>
    </div>
</body>
</html>
Stack of floating Boxes

If many adjacent objects are floated in the same direction, a stack of floating objects can appear. The floating objects are rendered on the same line one after another.

Related Tutorial
4 Float

6 Clear
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #