CSS Float and Clear Property
CSS Float property is used for positioning on web pages. This is used to float or move HTML element to the right or left side of its container.
The Float property allows us to position block-level elements side-by-side instead of on top of each other. As HTML elements are placed along the left or right side of its container, this allows text to wrap around it.
Important Key Points:
- Absolutely positioned HTML elements ignore the float property!
- After float elements, the next elements will flow around it. To avoid this, clear float using a clear property.
CSS Float property is one of the difficult or confusing concepts of all positioning properties. Its behaviour can be unexpected for beginners. Because float not only applies to the current HTML element but also influences its surrounding elements.
You will be able to understand ‘float’ better once we will work with an example.
CSS Float Property Types:
CSS float property can have the following values:
- left – floats element to the left of its container
- right- floats element to the right of its container
- none – The element does not float. This is the default value
- inherit – It will inherit the float direction from its parent
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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>
<hr />
<div>
<img src="https://i2.wp.com/tutorialsclass.com/wp-content/uploads/2018/03/tc-sidebanner-v2.png?w=100" style="float:right; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae molestie nibh, a molestie arcu. Duis placerat mauris quis felis fermentum iaculis. Fusce vestibulum, arcu sit amet varius consequat, ante leo congue felis, eu blandit tellus diam vel tortor. Praesent eget diam nec metus lobortis vestibulum ut ut felis. Donec sollicitudin velit nec consectetur porttitor. Etiam metus magna, tempus et luctus ut, suscipit vel dolor. Nulla consequat urna et finibus mattis. Morbi eget ex nisi. Vestibulum ipsum ipsum, accumsan nec molestie ac, sagittis quis massa. Sed auctor tellus at aliquet venenatis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu ligula sollicitudin, vestibulum justo in, cursus dui. Etiam vitae ante tristique, commodo erat et, bibendum leo. Praesent mollis efficitur felis non elementum. Fusce ut fringilla ex. Nunc quis lorem nec nisl maximus finibus. Praesent facilisis nunc in risus hendrerit vulputate. Vivamus diam arcu, tempus nec nibh tristique, pretium fringilla ligula. Etiam molestie mi vitae metus dignissim pretium. Cras tincidunt dolor ut lacus bibendum volutpat.
</div>
</body>
</html>Description:
In this program, we have set float right to the image. Now the image will move to the right side of the container and next HTML element will float around it. This is how Float property in CSS works.
Webpage layout using CSS float
You can create webpage layouts using float. Float is very useful to create a different kind of blocks & layout structure in webpages.
We will learn more in the CSS Layout chapter.
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |