CSS Float
The float property lets an element sit to the left or right of its container while surrounding content wraps around it.
Floating takes an element out of the normal vertical flow and shifts it as far left or right as it can go inside its parent. Inline content that comes after it, such as text and images, then flows around the floated box. Float was originally created for wrapping text around images in articles.
The float values
Wrapping text around an image
Float an image left
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin: 0 16px 8px 0;
width: 180px;
}
</style>
</head>
<body>
<article>
<img src="mountain.jpg" alt="Mountain landscape">
<p>The image floats left while this text wraps around it, filling the space to the right and below.</p>
</article>
</body>
</html>The margin on the non-floated sides keeps the wrapping text from touching the image. Notice how the paragraph text now hugs the right edge of the picture.
Floating boxes side by side
Two columns with float
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar {
float: left;
width: 30%;
}
.content {
float: left;
width: 70%;
}
</style>
</head>
<body>
<div class="sidebar">
<p>Sidebar links</p>
</div>
<div class="content">
<p>Main content area</p>
</div>
</body>
</html>One catch with floats is that a parent that contains only floated children collapses to zero height. The next lesson on Clear and Clearfix shows how to fix that.
Exercise: CSS Float
What does float: left do to an element?
