The float property specifies whether an element should float or not.

Floating means that the element is aligned to right (float: right) or left (float: left) and that the item comes back takes the remaining space in the same line, ie, surrounding the floating element.

Example of an element that floats to the right:

.right { float:right; }

Example of a floating element on the left:

.left { float:left; }

The above elements to the floating element unaffected. Only the following items are affected.

If we want the next element to a float, not affected, use the clear property.

Example of an item that will not be affected by a float before.

p.clear { clear:both; }

You can put several items float followed, and get them to appear on the same line if there is room, or on the next line if no room.

This is useful to list a series of images without knowing the type of device, so without knowing the space, where they will be displayed.

.imglist { float:left; width:100px; height:90px; margin:4px; } <img class="imglist" src="image1.jpg" > <img class="imglist" src="image2.jpg" > <img class="imglist" src="image3.jpg" > <img class="imglist" src="image4.jpg" > <img class="imglist" src="image5.jpg" > <img class="imglist" src="image6.jpg" >

If the device has room where they are displayed on screen, the 6 images are displayed on the same line. If space is less, will be displayed on multiple lines.

If you delete an image through JavaScript (see code below) the images will move to the left (float: left), occupying the space left by the deleted image.

To delete an element in javascript:

<script type="text/javascript"> function removeElement(id) { document.getElementById(id).style.display="none"; } </script>

To run the above code, we can make a button that calls javascript function:

<div id="element1"> <img class="imglist" src="image1.jpg" width="107" height="90"><br /> <input type="button" onclick="removeElement('element1')" value="Remove" /> </div>