CSS Float
The CSS float property is commonly used to position elements to the left or right of their containing block, allowing text and other elements to wrap around them.
Basic Usage
To use float, you simply need to apply it to the element you want to float. For example, if you want to float an image to the left of a paragraph, you would do the following:
<img src="example.jpg" style="float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
By setting the float property to left, the image will float to the left of the paragraph.
Clearing Floats
One common issue when using float is that it can cause elements below the floated element to not properly clear the float. This can result in unexpected layout issues. To prevent this, you can use the clear property. For example:
<div style="clear: both;"></div>
By adding an element with clear: both; after the floated elements, you can ensure that elements below the floated elements will be properly positioned.
Float Direction
The float property can float elements either left or right. By default, elements will float to the left. To float an element to the right, you would set the float property to right. For example:
<div ><img src="image.jpg" style="float: right;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
By setting the float property to right, the image will float to the right of the paragraph.