The float property is used to create a floated box. Let's create a web page named floatbox.html to implement the float property.
<!doctype html>
<head>
<title> float property in CSS
</title>
<style type="text/css">
IMG{float:left;border:solid lime;
}
p{margin:2em;
border:solid red;
}</style>
</head>
<body>
<p><IMG src="image.gif" alt="floated image">
floated example floated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated example
</body>
</html>
The IMG element is floated to the left and the content of the p element is formatted to right of the float.
The output of the floatbox.html file:
<!doctype html>
<head>
<title> float property in CSS
</title>
<style type="text/css">
IMG{float:left;border:solid lime;
}
p{margin:2em;
border:solid red;
}</style>
</head>
<body>
<p><IMG src="image.gif" alt="floated image">
floated example floated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated examplefloated example
</body>
</html>
The IMG element is floated to the left and the content of the p element is formatted to right of the float.
The output of the floatbox.html file:
No comments:
Post a Comment