CSS Float
The CSS float property is used to position an element to the left or right of its container. This lets other elements flow around it. It's often used for images and creating layouts.
How it Works
Elements can only be floated horizontally, meaning they can only move to the left or right. You can’t float elements up or down.
- A floated element can be positioned all the way to the left or right of its container. In other words, it can appear at the far left or far right edge.
- Elements that come after a floated element will move around it.
- Elements that come before the floated element won't be affected.
- If an image is floated to the right, the text will wrap around it on the left side. If the image is floated to the left, the text will wrap around it on the right side.
CSS Float Properties
CSS Float Property Values
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 10px; /* Added margin for spacing */
}
</style>
</head>
<body>
<p>
The following paragraph contains an image with the style <b>float: right</b>. The result is that the image will float to the right within the paragraph.
</p>
<img src="ak.jpg" alt="hello">
<p>
some text. This is some text. This is some text. This is some text. This is some text.
</p>
<p>
some text. This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
