CSS Float
The CSS float property specifies that an element must float.
Below are the values the float property can have:
- left
- right
- none
Example of Float left
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Float
</title>
</head>
<body>
<img
src="butterfly.jpg"
alt="Butterfly image"/>
Butterflies are members of the insect order Lepidoptera, and they belong to the same order as moths. Butterflies are beautiful insects with commonly bright-colored, attractive wings, which are usually scaled. They have two sets of large and typically colorful wings. These are frail and possess very small scales, which render them their coloring and patterns.
</p>
</body>
</html>
CSS
img
{
float: left;
width: 150px;
}
Output
Example of Float right
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Float
</title>
</head>
<body>
<img
src="butterfly.jpg"
alt="Butterfly image"
/>
Butterflies are members of the insect order Lepidoptera, and they belong to the same order as moths. Butterflies are beautiful insects with commonly bright-colored, attractive wings, which are usually scaled. They have two sets of large and typically colorful wings. These are frail and possess very small scales, which render them their coloring and patterns.
</p>
</body>
</html>
CSS
img
{
float: right;
width: 150px;
}
Output
