The CSS float attribute serves as a layout property that positions elements. It is employed to shift an element either to the left or right, enabling other elements to flow around it. Typically, it is applied in conjunction with images and various layout designs.
To grasp its function and history, we can examine its print layout. Within this layout, the image is positioned on the page in a way that allows text to flow around it as required.
Its webpage design closely resembles a print layout as well.
How it works
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.
- A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at extreme left or extreme right.
- The elements after the floating element will flow around it.
- The elements before the floating element will not be affected.
- If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.
CSS Float Properties
| Property | Description | Values |
|---|---|---|
| clear | The clear property is used to avoid elements after the floating elements which flow around it. | left, right, both, none, inherit |
| float | It specifies whether the box should float or not. | left, right, none, inherit |
CSS Float Property Values
| Value | Description |
|---|---|
none |
It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value. |
left |
It is used to float the element to the left. |
| right | It is used to float the element to the right. |
| initial | It sets the property to its initial value. |
| inherit | It is used to inherit this property from its parent element. |
CSS Float Property Example
Let's examine a basic illustration to grasp the concept of the CSS float attribute.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Good Morning Friends"/>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>