CSS Float
The CSS float property specifies whether a box should float or not.
Floating Elements with CSS
You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side.
The float property may have one of the three values:
| Value | Description |
|---|---|
left | The element floats on the left side of its containing block. |
right | The element floats on the right side of its containing block. |
none | Removes the float property from an element. |
How Elements Float
A floated element is taken out of the normal flow and shifted to the left or right as far as possible in the space available of the containing element.
Other elements normally flow around the floated items, unless they are prevented from doing so by their clear property. Elements are floated horizontally, which means that an element can only be floated left or right, not up or down.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Floating Elements</title>
<style>
img {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
}
</style>
</head>
<body>
<p><img src="/examples/images/kites.jpg" alt="Flying Kites"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</body>
</html>
If several floating elements are placed adjacently, they will float next to each other if there is horizontal room. If there is not enough room for the float, it is shifted downward until either it fits or there are no more floating elements present.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Floating Multiple Elements</title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
.thumbnail {
float: left;
width: 125px;
height: 125px;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li class="thumbnail"><img src="/examples/images/club.jpg" alt="Club Card"></li>
<li class="thumbnail"><img src="/examples/images/diamond.jpg" alt="Diamond Card"></li>
<li class="thumbnail"><img src="/examples/images/spade.jpg" alt="Spade Card"></li>
<li class="thumbnail"><img src="/examples/images/heart.jpg" alt="Heart Card"></li>
</ul>
</body>
</html>
Turning off Float Using Clear Property
Elements that comes after the floating element will flow around it. The clear property specifies which sides of an element’s box other floating elements are not allowed.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Clearing Floats</title>
<style>
.clear {
clear: left;
}
p {
float: left;
margin: 10px;
padding: 10px;
background: #f0e68c;
}
</style>
</head>
<body>
<p>Floated to left.</p>
<p class="clear">No floated elements are allowed on left side.</p>
</body>
</html>
Note: This property can clear an element only from floated boxes within the same block. It doesn’t clear the element from floated child boxes within the element itself. To learn more about clearing float see tutorial on CSS Alignment.