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>
Related Tutorial
3. display
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #