CSS FLOAT
The CSS float property is used to specify how an element float. The CSS clear property is used to specify which elements are able to float next to the cleared elements and on which side.
An example of float property is its use with images to position images next to text inside a div.
Float property values:
- left: element will float to the left in its container
- right: element will float to the right in its container
- none: element will not float
- inherit: element will inherit the float property value applied to its parent
Float Left
Here's the styling for floating left:
img {
float: left;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fermentum augue. Mauris nisl velit, interdum sed erat eget, vestibulum suscipit mauris. Phasellus varius maximus neque, ut mollis ante vulputate in. Suspendisse placerat fermentum sapien, rutrum eleifend tortor fringilla in. Morbi et aliquet leo, interdum pulvinar lacus. Curabitur pellentesque tristique nulla sit amet ullamcorper. Pellentesque luctus commodo orci ut euismod. Suspendisse ante nibh, malesuada in fringilla vel, imperdiet sit amet metus. Morbi suscipit eros vel felis cursus, vel blandit arcu fermentum. Duis tempus nec velit a dapibus. Quisque molestie, massa quis tincidunt blandit, leo orci fermentum felis, sed dignissim purus urna vitae turpis. Donec leo augue, tincidunt eget lorem in, blandit dictum diam. Curabitur eget nulla tortor.
Float Right
float:right is used to float an image towards right:
img {
float: right;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fermentum augue. Mauris nisl velit, interdum sed erat eget, vestibulum suscipit mauris. Phasellus varius maximus neque, ut mollis ante vulputate in. Suspendisse placerat fermentum sapien, rutrum eleifend tortor fringilla in. Morbi et aliquet leo, interdum pulvinar lacus. Curabitur pellentesque tristique nulla sit amet ullamcorper. Pellentesque luctus commodo orci ut euismod. Suspendisse ante nibh, malesuada in fringilla vel, imperdiet sit amet metus. Morbi suscipit eros vel felis cursus, vel blandit arcu fermentum. Duis tempus nec velit a dapibus. Quisque molestie, massa quis tincidunt blandit, leo orci fermentum felis, sed dignissim purus urna vitae turpis. Donec leo augue, tincidunt eget lorem in, blandit dictum diam. Curabitur eget nulla tortor.
Float None
Here's the styling for defining float as none:
img {
float: none;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fermentum augue. Mauris nisl velit, interdum sed erat eget, vestibulum suscipit mauris. Phasellus varius maximus neque, ut mollis ante vulputate in. Suspendisse placerat fermentum sapien, rutrum eleifend tortor fringilla in. Morbi et aliquet leo, interdum pulvinar lacus. Curabitur pellentesque tristique nulla sit amet ullamcorper. Pellentesque luctus commodo orci ut euismod. Suspendisse ante nibh, malesuada in fringilla vel, imperdiet sit amet metus. Morbi suscipit eros vel felis cursus, vel blandit arcu fermentum. Duis tempus nec velit a dapibus. Quisque molestie, massa quis tincidunt blandit, leo orci fermentum felis, sed dignissim purus urna vitae turpis. Donec leo augue, tincidunt eget lorem in, blandit dictum diam. Curabitur eget nulla tortor.