CSS float Property
The float property defines in which side of the container the elements should be placed, thus allowing the text or other elements to wrap around it. The property has three values: none left and right.
This property is directly related to the clear property which defines whether an element should be next to floating elements or it should be below them (clear).
The float property will be ignored if the elements are absolutely positioned (position: absolute).
| Initial Value | none |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.cssFloat = "right"; |
Syntax¶
float: none | left | right | initial | inherit;Example of the float property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="web">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>In the following example, the image floats to left.
Example of using the float property to float an image:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="web">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| none | This means that the element is not floated and it will be displayed where it comes in the text. this is the default value of this property. | |
| left | This means that the element floats to left. | |
| right | This means that the element floats to right. | |
| initial | Makes the property use its default value. | |
| inherit | Inherits the property from its parent's element. |
0 Comments
CAN FEEDBACK
Emoji