The CSS float property is used to position elements horizontally on a webpage, allowing text and other elements to wrap around the floated element. This property is particularly useful for creating layouts similar to print layouts where text flows around images or other block elements.
Horizontal Floating: Elements can only be floated horizontally, either to the left or the right. This means that you cannot float elements up or down.
Element Flow: Floated elements move as far to the left or right as possible within their containing block. Elements that follow the floated element will wrap around it, while elements preceding the floated element will not be affected.
Wrapping Behavior: For example, if an image is floated to the right, text will wrap around it on the left side. Conversely, if the image is floated to the left, the text will wrap around it on the right side.
float: Specifies whether an element should float or not.
clear: Prevents elements from flowing around a floated element.
| Value | Description |
|---|---|
| none | The element is not floated and will be displayed in the normal document flow. This is the default value. |
| left | Floats the element to the left of its containing block. Other content will wrap around it on the right side. |
| right | Floats the element to the right of its containing block. Other content will wrap around it on the left side. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
| Value | Description |
|---|---|
| left | Prevents floating elements on the left from affecting the element. |
| right | Prevents floating elements on the right from affecting the element. |
| both | Prevents floating elements on both sides from affecting the element. |
| none | No clearing of floating elements; the element will continue to flow around floated elements. |
| inherit | Inherits the property from its parent element. |
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Example</title>
<style>
.float-left {
float: left;
margin: 10px;
border: 1px solid black;
width: 150px;
}
.float-right {
float: right;
margin: 10px;
border: 1px solid black;
width: 150px;
}
.clear-both {
clear: both;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div>
<img src="https://via.placeholder.com/150" class="float-left" alt="Left
Float">
<p>
This text will wrap around the floated image on the left side.
The floating behavior allows text to flow around the image, adjusting the layout dynamically.
<br> Additional text content here to demonstrate the
wrapping behavior. You can see how the text flows around the image and adjusts according to the
space available.
</p>
</div>
<div>
<img src="https://via.placeholder.com/150" class="float-right" alt="Right
Float">
<p>
This text will wrap around the floated image on the right side.
Like the previous example, the text will flow around the image to the left, demonstrating how
floating affects text layout.
</p>
</div>
<div class="clear-both">
This div uses the "clear: both" property to ensure it starts below any
floated elements, preventing overlap with the floated images above.
</div>
</body>
</html>
This text will wrap around the floated image on the left side. The floating behavior allows
text to flow around the image, adjusting the layout dynamically.
Additional text content here to demonstrate the wrapping behavior. You can see how the
text flows around the image and adjusts according to the space available.
This text will wrap around the floated image on the right side. Like the previous example, the text will flow around the image to the left, demonstrating how floating affects text layout.