Let’s begin with Lecture 19 of the HTML5 & CSS3 series. Layout with Float and Clear – Classic CSS Positioning. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand how the
floatproperty works - Know how to use
clearto control the layout flow - Be able to create multi-column layouts and image galleries
- Fix common issues like overlapping or misaligned content
- Learn why
floatwas widely used before Flexbox and Grid
🧠 What Is float?
The float The property allows elements to be pushed to the left or right, letting other content (like text or images) wrap around them.
Think of it like this:
If your webpage is a newspaper, then
floatlets you place an image on one side while the article flows around it — just like in printed media!
🔤 Basic float Values
| Value | Behavior |
|---|---|
left | Element floats to the left of its container |
right | Element floats to the right |
none | Default — element doesn’t float |
Example:
img {
float: left;
margin-right: 15px;
}This makes text wrap around an image on the left.
💡 What is clear?
When elements start floating, they can cause unexpected layout behavior. The clear property tells browsers where certain elements should not float .
Think of it like this:
clearis like a stop sign for floating elements — it says, “No more floating here!”
🔤 Basic clear Values
| Value | Behavior |
|---|---|
left | No floating elements allowed on the left |
right | No floating elements allowed on the right |
both | No floating elements allowed on either side |
none | Default — allows floating on both sides |
Example:
.footer {
clear: both;
}This ensures that the footer always appears below any floated columns or images.
💻 Try This: Create a Two-Column Layout Using Float
Let’s build a simple two-column layout using float.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
two-column-layout.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.column {
width: 48%;
float: left;
margin-bottom: 20px;
}
.left {
background-color: #f0f8ff;
padding: 15px;
}
.right {
background-color: #fff8dc;
padding: 15px;
}
.footer {
clear: both;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Two-Column Layout with Float</h1>
<div class="column left">
<h2>Left Column</h2>
<p>This is the left column. It contains some sample text about HTML and CSS.</p>
</div>
<div class="column right">
<h2>Right Column</h2>
<p>This is the right column. It also contains useful information and tips for learning web development.</p>
</div>
<div class="footer">
<p>© 2025 My Website. All rights reserved.</p>
</div>
</div>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve created a classic two-column layout using only float and clear!
🧪 Try It Yourself!
- Add a third column and make it float right.
- Remove
clear: bothfrom the footer and see what happens. - Add an image inside one of the columns and make it float left.
- Make the columns responsive by adding
box-sizing: border-box;and adjusting widths.
⚠️ Note About Floats:
While float It is still supported, modern layouts are usually done with Flexbox and Grid, which are easier and more powerful.
But knowing how float and clear work helps you understand older websites and legacy code — and sometimes it’s still useful for simple tasks like image alignment.
🚀 Next Lecture Preview:
In Lecture 20, we’ll dive into Flexbox — a modern way to layout content in rows or columns with easy alignment, spacing, and ordering — no more float hacks needed!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
