The float property creates a floating box.
The floating iframe can be created by applying this property to the IFRAME element.
#example {
float: left;
}
| Property | Value | Explanation |
|---|---|---|
| float | left | the iframe floats to the left (the text wraps to the right of the iframe) |
| right | the iframe floats to the right (the text wraps to the left of the iframe) |
|
| none | the iframe doesn't float (default) |
Please see the "clears float" when you specified the left or right.
<html> <head> <title>TAG index</title> <style type="text/css"> #example { width: 100%; } iframe { width: 200px; height: 130px; } #example1 { float: left; } #example2 { float: right; } </style> </head> <body> <div id="example"> <iframe src="example.html" id="example1">Alternate content</iframe> <p> The text wraps to the right of the iframe.<br> This is example text.<br> This is example text. </p> <p style="clear: left;">--- Clears the left float ---</p> <iframe src="example.html" id="example2">Alternate content</iframe> <p> The text wraps to the left of the iframe.<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 iframe.
This is example text.
This is example text.
--- Clears the left float ---
The text wraps to the left of the iframe.
This is example text.
This is example text.
--- Clears the right float ---