float: ***;
| Browser |
|
|---|
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.
Example
<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>
- Output
-
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 ---