CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the
cleared
element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let
an
image float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs
in the text). This is default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around
images.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
</style>
</head>
<body>
<h2>Float Right</h2>
<p>In this example, the image will float to the right in the paragraph, and
the text in the paragraph will
wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple"
style="width:170px;height:170px;margin-left:15px;">
fhdgkdfkgfdkgkfdkgfdkgkfdgkfdkgfdkgkfdkg.</p>
</body>
</html>