float
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
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="W3dcos">
<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>
Result
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="W3dcos">
<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
Values
| Value | Description | Play it |
|---|---|---|
| none | 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. | Play it » |
| left | Means that the element floats to left. | Play it » |
| right | Means that the element floats to right. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |