CSS Float
What is CSS Float?
The CSS float property is used to position an element to the left or right of its container, allowing surrounding content such as text or images to wrap around it. Before Flexbox and Grid became popular, float was widely used to create webpage layouts. Today, it is mainly used for wrapping text around images and creating simple side-by-side elements.
Why Use CSS Float?
The float property helps create attractive text and image layouts. It is commonly used for image galleries, newspaper-style articles, sidebars, and wrapping text around images. Although modern layouts usually use Flexbox or Grid, understanding float is still important because many websites continue to use it.
Common Float Values
Basic Float Syntax
<!DOCTYPE html>
<html>
<head>
<style>
img{
float:left;
}
</style>
</head>
<body>
<img src="https://picsum.photos/120" alt="Image">
<p>
This text wraps around the image.
</p>
</body>
</html>Step 1: Float an Image to the Left
Using float:left moves the image to the left side while allowing text to wrap around it.
<!DOCTYPE html>
<html>
<head>
<style>
img{
float:left;
margin-right:15px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/150" alt="Nature">
<p>
This paragraph automatically wraps around the image because the image is floated
to the left.
</p>
</body>
</html>Step 2: Float an Image to the Right
The float:right value moves the image to the right while text flows on the left side.
<!DOCTYPE html>
<html>
<head>
<style>
img{
float:right;
margin-left:15px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/150" alt="Landscape">
<p>
The image is placed on the right, and the text wraps neatly around it.
</p>
</body>
</html>Step 3: Create Two Floating Boxes
Two elements can be placed side by side by floating one or both of them.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
float:left;
width:45%;
padding:20px;
margin:10px;
background:#007BFF;
color:white;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box">
Box One
</div>
<div class="box">
Box Two
</div>
</body>
</html>Step 4: Clear Floated Elements
The clear property prevents elements from wrapping around floated elements. It is commonly used after floated layouts.
<!DOCTYPE html>
<html>
<head>
<style>
.left{
float:left;
width:45%;
padding:20px;
background:#28a745;
color:white;
}
.right{
float:right;
width:45%;
padding:20px;
background:#dc3545;
color:white;
}
.clear{
clear:both;
padding-top:20px;
}
</style>
</head>
<body>
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
<div class="clear">
This text appears below both floating boxes.
</div>
</body>
</html>Step 5: Float Navigation Links
Float can also arrange navigation links horizontally. However, Flexbox is generally recommended for modern navigation menus.
<!DOCTYPE html>
<html>
<head>
<style>
a{
float:left;
padding:14px 20px;
background:#007BFF;
color:white;
text-decoration:none;
margin-right:5px;
}
</style>
</head>
<body>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</body>
</html>Complete CSS Float Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
}
img{
float:left;
margin-right:20px;
border-radius:6px;
}
.article{
line-height:1.8;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<img src="https://picsum.photos/180" alt="Nature">
<div class="article">
<h2>CSS Float Example</h2>
<p>
The image is floated to the left while the paragraph wraps around it naturally.
This technique is commonly used in blog posts and news articles.
</p>
</div>
<div class="clearfix"></div>
</body>
</html>Advantages of CSS Float
Best Practices
- Use Float mainly for wrapping text around images.
- Always clear floated elements using the clear property or a clearfix.
- Add margins around floated elements to improve spacing.
- Use Flexbox or Grid instead of Float for complex webpage layouts.
- Keep floated elements inside their parent containers.
- Test layouts on different screen sizes.
- Use meaningful class names for floated elements.
- Keep your CSS clean and avoid unnecessary floating.
Web Resources on CSS Float
1. MDN Web Docs : float CSS property
2. MDN Web Docs : Test your skills, Floats
3. Dev.to : Here’s how floats work in CSS
4. CSS Tricks.com : Is CSS float deprecated?
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.