Categories
CSS float is a property used to control the positioning of an element within its containing element. When you apply float to an element, it is taken out of the normal document flow and moved to the left or right, allowing other content to flow around it.
Here's an explanation of the float property along with some examples:
1. Float an element to the left: This example will float an image to the left of the text, and the text will wrap around the image.
HTML:
<div class="container">
<img src="example.jpg" alt="Example Image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
CSS:
.container {
width: 300px;
}
img {
float: left;
margin-right: 10px;
}
2. Float an element to the right: This example will float an image to the right of the text.
HTML:
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="example.jpg" alt="Example Image" />
</div>
CSS:
.container {
width: 300px;
}
img {
float: right;
margin-left: 10px;
}
3. Clear the float: When you float elements, it's essential to clear the float afterward to ensure the layout behaves as expected. The clear property is used to do this.
HTML:
<div class="container">
<img src="example.jpg" alt="Example Image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div style="clear: both;"></div>
</div>
CSS:
.container {
width: 300px;
}
img {
float: left;
margin-right: 10px;
}
4. Creating a multi-column layout: You can use float to create a simple multi-column layout.
HTML:
<div class="column">
<p>Column 1</p>
</div>
<div class="column">
<p>Column 2</p>
</div>
CSS:
.column {
width: 150px;
float: left;
}
5. Float an element within a container: You can float an element within its container to create a layout with multiple floated elements.
HTML:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
CSS:
.container {
width: 300px;
}
.box {
width: 100px;
height: 100px;
float: left;
margin: 5px;
}