Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
float property makes an element "float" to the left or right, allowing text and inline elements to wrap around it. Originally designed for magazine-style layouts with images.Float an image left or right and let text wrap around it - like in newspapers and magazines!
Element floats to the left, content wraps on the right
float: left;Element floats to the right, content wraps on the left
float: right;Default - element doesn't float
float: none;<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📰 Float Examples</h1>
<div class="article clearfix">
<div class="label label-left">float: left</div>
<div class="image-box float-left">
Floated<br>Left
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Notice how the text wraps around the floated element on the right side.
This is perfect for magazine-style layouts where you want images
to be surrounded by text. The float property was originally designed
for exactly this purpose. Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris. The content flows naturally around
the floated box, creating an organic reading experience similar
to traditional print media.
</p>
</div>
<div class="article clearfix">
<div class="label label-right">float: right</div>
<div class="image-box float-right">
Floated<br>Right
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Now the element is floated to the right, and text wraps on the left side.
This creates a different visual flow and can be used to vary the layout
of your content. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. The float property removes the element from normal document
flow, allowing text and inline elements to wrap around it. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
This technique is still commonly used for images in blog posts and
articles where you want text to flow around visual content naturally.
</p>
</div>
</div>
</body>
</html>Loading preview...
The clear property specifies which sides of an element cannot be adjacent to floated elements.
No floated elements allowed on the left
clear: left;No floated elements allowed on the right
clear: right;No floated elements on either side
clear: both;Add this class to the parent container that has floated children:
.clearfix::after {
content: "";
display: table;
clear: both;
}Then apply: <div class="clearfix">
Container height collapses, floated children overflow
Container properly contains floated children