Create Web Page Layouts With CSS

Elements below a float will come up around the floated element. That's what you learned in the last chapter. For example, if an image is floated left, the text will wrap up around it.

Sometimes, though, you don't want adjacent elements all to float up around the floated element! This is where you'll need to clear a float. Think of when you 'clear' an obstacle, for example; it means it's out of your way. When you want a floated element to be out of an other element's way, clear it.

Take the example of this simple article with an image that floats to the right:

HTML

<article>
    <img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7196fdeaccc275a9853bf35261c7878e">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et netus et malesuada fames ac turpis egestas integer. Duis ut diam quam nulla porttitor massa. Lectus arcu bibendum at varius vel pharetra vel turpis.</p>
    <p id="clear">Elementum facilisis leo vel fringilla est ullamcorper. Lorem ipsum dolor sit amet consectetur adipiscing elit ut. Leo duis ut diam quam. Ultrices tincidunt arcu non sodales neque. Tortor condimentum lacinia quis vel eros donec ac. Rhoncus urna neque viverra justo. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Urna et pharetra pharetra massa massa ultricies. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sit amet dictum sit amet justo donec enim diam vulputate. Convallis tellus id interdum velit laoreet id donec. Mi eget mauris pharetra et ultrices. Mattis pellentesque id nibh tortor id. Ac placerat vestibulum lectus mauris ultrices eros. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Nam libero justo laoreet sit amet cursus sit amet dictum.</p>
</article>

CSS

* {
    font-family: Futura;
}

article {
    background-color: #c1e0f4;
    padding: 10px;
}

img {
    width: 200px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}

If only the first paragraph were relevant to the image, we may not want the second paragraph also floating up there next to it! The  clear  property will let us specify that we want a particular element to be below a floated element, not next to it.

The  clear  property can have a value of  left ,  right , or  both  (meaning it will clear floated elements to the left, right, or either direction; "both" is probably what you'll see most often because it covers all cases):

#clear {
    clear: both;
}

Knowing how to float elements and add the clear property when you want other elements to not be affected by the float is important. Remember, though, that you should not be using these techniques in your layouts anymore.

Recap

• Just stick with float and clear usage in this very specific case of wrapping text around images, and you should be fine!