# Floating elements

The float property can be used to move an HTML element to the far left or to the far right of its parent element
float is primarily used to float text around pictures

    
<h1>Float</h1>
<p>
    <img id="img1" src="https://picsum.photos/id/309/200/150" alt="Leaf">
    <img id="img2" src="https://picsum.photos/id/35/200/150" alt="Cactus">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eaque nihil quo ipsum tempore tenetur ipsam laborerepellat, ea vitae asperiores ex voluptas aut, iure ut consequuntur libero reprehenderit, neque perspiciatis? 
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias repellendus commodi sit rerum sint accusamus molestiae doloribus vitae, vel eveniet amet perspiciatis voluptates laborum voluptatum optio cupiditate mollitia ratione id facilis temporibus laudantium esse earum ea fugit provident! 
</p>

    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.5;
    padding: 1rem;
}

p {
    text-align: justify;
    margin-bottom: 1rem;
}

img {
    background-color: #f5bda6;
    padding: .5rem;
}

#img1 {
    /* float: right;
    margin-left: 1rem;
    margin-bottom: 1rem; */
}

#img2 {
    /* float: left;
    margin-right: 1rem;
    margin-bottom: 1rem; */
}

TIP

For the best viewing results, open this CodePen in a separate window by clicking on EDIT ON CODEPEN
Float none

# Float right

In Codepen, edit the first image by adding some extra code:
- Float #img1 to the right side of its parent element
- Give the image some extra space by adding some margin at the left and bottom

#img1 {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

1
2
3
4
5

Float right

# Float left

In CodePen, edit the second image by adding some extra code:
- Float #img2 to the left side of its parent element
- Give the image some extra space by adding some margin at the right and bottom

#img2 {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

1
2
3
4
5

Float left

# Stop floating

# Clear float

Sometimes you want the floating to stop because it will break the layout
In the next example, we want the second paragraph below the first paragraph

Clear float

You can stop the floating by adding the clear: both property to the second paragraph
(both means that there can't be a floating element on the left or on the right)
You probably need this more than once in a website, so it's best to make a special class for this

.clearfloat {
    clear: both;
}

1
2
3

Add the class .clearfloat to the second paragraph

<p class="clearfloat">
    <img ... />
    ...
</p>

1
2
3
4

    
<h1>Clear float</h1>
<p>
    <img id="img1" src="https://picsum.photos/id/309/200/150" alt="Leaf">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eaque nihil quo ipsum tempore tenetur ipsam labore repellat, ea vitae asperiores ex voluptas aut, iure ut consequuntur libero reprehenderit, neque perspiciatis?
</p>
<p class="">
    <img id="img2" src="https://picsum.photos/id/35/200/150" alt="Cactus">
    Nesciunt quia voluptatem accusamus magni perspiciatis exercitationem ratione, quidem, fugiat non suscipit! Nesciunt quo blanditiis dolorem itaque, sunt dolore minus optio minima quae laudantium doloremque maiores dignissimos iure sit similique neque impedit est recusandae aperiam repudiandae expedita eum libero illum laborum. 
</p>

    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.5;
    padding: 1rem;
}

p {
    text-align: justify;
    margin-bottom: 1rem;
}

img {
    background-color: #f5bda6;
    padding: .5rem;
}

#img1 {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

#img2 {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.clearfloat {
    clear: both;
}

Clear float

# Clear fix

Clearing floats is not always a good solution
Let's go back to the first example, but with some additional styling added to the paragraphs

Float - example with styling

If we add the class clearfloat to the second paragraph (as we did before), the floating stops, but the images don't stay within their parent paragraph

Float - example with styling - clearfloat

To fix this behavior (= to ensure that the parent element will expand to a proper height enclosing its floating children), you can use the style rule overflow: auto; on the parent (or ancestor) tag
You probably need this more than once in a website, so it's best to make a special class for this

.clearfix {
    overflow: auto;
}

1
2
3

Add the class clearfix to the p tag that contains the floating images (and remove the class clearfloat from the second paragraph)

<p class="clearfix">
    <img ... />
    <img ... />
    ...
</p>

1
2
3
4
5

Float - example with styling - clearfix

    
<h1>Clear fix</h1>
<p class="">
    <img id="img1" src="https://picsum.photos/id/309/200/150" alt="Leaf">
    <img id="img2" src="https://picsum.photos/id/35/200/150" alt="Cactus">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eaque nihil quo ipsum tempore tenetur ipsam labore repellat, ea vitae asperiores ex voluptas aut, iure ut consequuntur libero reprehenderit, neque perspiciatis? 
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias repellendus commodi sit rerum sint accusamus molestiae doloribus vitae, vel eveniet amet perspiciatis voluptates laborum voluptatum optio cupiditate mollitia ratione id facilis temporibus laudantium esse earum ea fugit provident! 
</p>

    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.5;
    background-color: #f3f5a6;
    padding: 1rem;
}

p {
    margin-bottom: 1rem;
    text-align: justify;
    border: 1px solid #000;
    background-color: #fff;
    padding: 1rem;
}

img {
    background-color: #f5bda6;
    padding: .5rem;
}

#img1 {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

#img2 {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

 .clearfloat {
     clear: both;
 }

.clearfix {
    overflow: auto;
}

# Emmet

EMMET instruction	result
`fl` + `TAB`	`float: left;`
`fl:r` + `TAB`	`float: right;`
`cl` + `TAB`	`clear: both;`
`cl:b` + `TAB`	`clear: both;`
`ov:a` + `TAB`	`overflow: auto;`