float: ***;
| Browser |
|
|---|
The float property creates a floating box.
The floating image can be created by applying this property to the IMG element.
#example {
float: left;
}
| Property | Value | Explanation |
|---|---|---|
| float | left | the image floats to the left (the text wraps to the right of the image) |
| right | the image floats to the right (the text wraps to the left of the image) |
|
| none | the image doesn't float (default) |
Please see the "clears float" when you specified the left or right.
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
#example { width: 100%; }
#example1 { float: left; }
#example2 { float: right; }
</style>
</head>
<body>
<div id="example">
<img src="image/photo.jpg" alt="Example" width="200" height="133" id="example1">
<p>
The text wraps to the right of the image.<br>
This is example text.<br>
This is example text.
</p>
<p style="clear: left;">--- Clears the left float ---</p>
<img src="image/photo.jpg" alt="Example" width="200" height="133" id="example2">
<p>
The text wraps to the left of the image.<br>
This is example text.<br>
This is example text.
</p>
<p style="clear: right;">--- Clears the right float ---</p>
</div>
</body>
</html>
- Output
-
The text wraps to the right of the image.
This is example text.
This is example text.--- Clears the left float ---
The text wraps to the left of the image.
This is example text.
This is example text.--- Clears the right float ---