CSS float Property – How to Float Elements in CSS
float removes an element from the document's normal layout flow and relocates it to the right or left of its container.
- Although
float
removes an element from the normal flow, in contrast toabsolute
positioning, the element remains part of the flow—browsers only move it to the left or right of its container. float
does not work with an absolutely positioned element.- The CSS
float
property allows text and inline elements following the floating element to wrap around it.
Examples of the CSS float
Property
Below are some examples of how the CSS float
property works.
Note the following:
float: none
will not float the selected element. This value is the default.float: right
places the selected element to its container's right side.float: left
positions the selected element to its container's left side.float: initial
sets thefloat
property to its default value.float: inherit
inherits its parent element'sfloat
property's values.
Float image to the right
- CSS
- HTML
img {
width: 250px;
float: right;
margin-left: 17px;
margin-bottom: 10px;
}
<p>
<img
src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
alt="Waterfall"
/>Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river
named Duden flows by their place and supplies it with the necessary
regelialia. It is a paradisematic country, in which roasted parts of sentences
fly into your mouth. Even the all-powerful Pointing has no control about the
blind texts it is an almost unorthographic life One day however a small line
of blind text by the name of Lorem Ipsum decided to leave for the far World of
Grammar. The Big Oxmox advised her not to do so, because there were thousands
of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind
Text didn't listen. She packed her seven versalia, put her initial into the
belt and made herself on the way. When she reached the first hills of the
Italic Mountains, she had a last view back on the skyline of her hometown
Bookmarksgrove, the headline of Alphabet Village and the subline of her own
road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
The snippet above used the float
property to float the image to the right side of its container.
Float text to the left
- CSS
- HTML
p::first-letter {
font-size: 6.7rem;
float: left;
font-family: algerian, "Courier New", Courier, monospace;
margin-right: 10px;
}
<p>
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river
named Duden flows by their place and supplies it with the necessary
regelialia. It is a paradisematic country, in which roasted parts of sentences
fly into your mouth. Even the all-powerful Pointing has no control about the
blind texts it is an almost unorthographic life One day however a small line
of blind text by the name of Lorem Ipsum decided to leave for the far World of
Grammar. The Big Oxmox advised her not to do so, because there were thousands
of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind
Text didn't listen. She packed her seven versalia, put her initial into the
belt and made herself on the way. When she reached the first hills of the
Italic Mountains, she had a last view back on the skyline of her hometown
Bookmarksgrove, the headline of Alphabet Village and the subline of her own
road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
The snippet above used the float
property to float the paragraph element's first letter to the left.
::first-letter
is a CSS pseudo-element selector.
Learn CSS Grid with Images
You can use the CSS clear
property to prevent items from wrapping around floating elements.
How to Fix Overflowing Floating Elements
Suppose your floating element's height is taller than its container. In that case, the floating element will overflow.
Here's an example:
- CSS
- HTML
div {
background-color: #fff29c;
border: 3px solid #301551;
color: #301551;
padding: 10px;
}
img {
float: right;
width: 60%;
margin-left: 5px;
}
<div>
<img
src="https://images.unsplash.com/photo-1589918099791-34cccabea776?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="Waterfall"
/>
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.
</div>
There are three ways to prevent a floating element from overflowing its container.
- Implement the clearfix hack
- Use the CSS
overflow
property - Set the container's
display
property toflow-root
Let's discuss the three ways below.
How to use the clearfix hack to fix overflowing floating elements
The traditional way to prevent a floating element from overflowing its container is to use the CSS clear
property in a hacky way like so:
- Use the
::after
pseudo-element and thecontent
property to insert new content as the container's last child. - Make the new content a block-level element.
- Clear both sides of the new content.
Here's the code:
div {
background-color: #fff29c;
border: 3px solid #301551;
color: #301551;
padding: 10px;
}
div::after {
content: "";
display: block;
clear: both;
}
img {
float: right;
width: 60%;
margin-left: 5px;
}
How to use the CSS overflow
property to fix overflowing floating elements
An alternative way to prevent a floating element from overflowing its container is to set the container's overflow
property to an acceptable value other than visible
.
Here's an example:
div {
background-color: #fff29c;
border: 3px solid #301551;
color: #301551;
padding: 10px;
overflow: auto;
}
img {
float: right;
width: 60%;
margin-left: 5px;
}
Using the overflow property may create unintended effects like scrollbars or clipped shadows.
How to use flow-root
to fix overflowing floating elements
An elegant way to prevent a floating element from overflowing its container is to set the container's display
property to flow-root
.
Here's an example:
div {
background-color: #fff29c;
border: 3px solid #301551;
color: #301551;
padding: 10px;
display: flow-root;
}
img {
float: right;
width: 60%;
margin-left: 5px;
}
Unlike the overflow
property, flow-root
does not produce unwanted effects. Instead, it only establishes a new block formatting context (BFC) for the selected element's content.
Overview
This article discussed what a CSS float
property is. We also used examples to see how it works.