The float property creates a floating box.
div {
float: left;
}
| Property | Value | Explanation |
|---|---|---|
| float | left | the box floats to the left (the text wraps to the right of the box) |
| right | the box floats to the right (the text wraps to the left of the box) |
|
| none | the box doesn't float (default) |
Please see the "clears float" when you specified the left or right.
The text wraps
<html> <head> <title>TAG index</title> <style type="text/css"> #exampleA { width: 100%; } #example1 { width: 50%; height: 100px; background-color: #85b9e9; float: left; } #example2 { width: 50%; height: 100px; background-color: #85b9e9; float: right; } </style> </head> <body> <div id="exampleA"> <div id="example1">The box floats to the left</div> <p> The text wraps to the right of the box.<br> This is example text.<br> This is example text. </p> <p style="clear: left;">--- Clears the left float ---</p> <div id="example2">The box floats to the right</div> <p> The text wraps to the left of the box.<br> This is example text.<br> This is example text. </p> <p style="clear: right;">--- Clears the right float ---</p> </div> </body> </html>
The text wraps to the right of the box.
This is example text.
This is example text.
--- Clears the left float ---
The text wraps to the left of the box.
This is example text.
This is example text.
--- Clears the right float ---
The box wraps
<html> <head> <title>TAG index</title> <style type="text/css"> #exampleB { width: 520px; } .example3 { width: 150px; height: 100px; background-color: #85b9e9; margin-right: 20px; float: left; } </style> </head> <body> <div id="exampleB"> <div class="example3">The first box</div> <div class="example3">The second box</div> <div class="example3">The third box</div> <p style="clear: left;">--- Clears the left float ---</p> </div> </body> </html>
--- Clears the left float ---