The float property is used for aligning elements by changing the natural page flow. Learn about he ins and outs of using the float property.
- [Instructor] Float is another property that can be used to rearrange how elements are displayed. Let's go over what the natural page flow looks like first. By default, block level elements are displayed stacked on top of each other and take up 100% of the width, in the order of how it's written. Inline elements stay within their context, since they only take up the amount of space as the content contained between the tags, they are displayed within the line. The parent element wraps the content contained in the child elements.
Using the float property won't remove elements from the natural flow, but it will change it by aligning blocks to the left or right of its container. This changes the natural flow, because the elements following the floated elements will be disrupted. Let's try this out in an example. The pink background in this example has been added to the parent element, just to visually show that it is wrapping its nested elements. Now if I add float left to the image, and run it, the paragraph following it will move up and flow next to it.
And since the content is longer than the image, the remaining text will flow underneath it. You can also float elements to the right as well. I'm just going to put my image back to the left side for the rest of the demo, and add some margin to the right side of the image to add some space between the image and the text. Now let's say you had a shorter paragraph, where the height is less than that of the floated element.
Let's comment out this long paragraph and see what happens. Let's go ahead and run that, now, all elements that follow the floated element will flow around it, as long as there's space for it. So now that we have a shorter paragraph, the heading is also aligned to the image. If you only wanted the first paragraph to flow around the image, then what you'll need to do is clear the float.
Using floats to align elements will change the natural stacking order. So to get the rest of the page to go back to normal, the float must be cleared. Where and how you clear the float, depends on where you want the page to return to this natural flow. So let's take a closer look at the previous example. We had our image floated left, and although the float is applied to the image, all the elements following it will align left to the floated element, and that's how we got the paragraph text to flow around the image.
Now, if you only wanted the paragraph to float next to the image, then we'll have to apply what's called a clear to the H1 heading to return it back to the natural stacking flow. In this example, the clear property will be added to the H1 with the value of both. And this will clear any floats that are set to the left or the right. So let's go back to our JS fiddle example, and add in the clear, so that we can see how this works. Setting the clear to the H1 will return the page back to its natural stacking flow from this point on.
Floats not only effect the stacking order, it also effects the parent element. In this example, the parent element no longer recognizes the height of the floated element, and it will only wrap around the elements that do not have a float applied to it, represented by the black outline in this example. If all the content within the parent element is floated, its height will collapse to zero. Any elements following the collapsed container will also not recognize the floated elements, and will stack itself underneath.
In the scenario where there is no element within the container to clear the float, what we'll need to do instead is self-clear the float. And this will make the parent contain any floated child elements. There are two ways to do this. The first option is to use the overflow property, with a value of auto or hidden. Apply this to the parent of the floated element, and while this is a common technique for clearing floats, overflow is actually used to specify how to display content that flows longer than its container.
Let's take a quick look at how overflow works. You'll only need to use overflow for this purpose when you've given a component a specific height and the content flows over it. So let me add in this height of 50 pixels, and see what happens. Now, the content is overflowing its height, so if we set overflow to hidden, it will clip the content. And if you set it to auto, it will add a scroll bar.
Unless you need to use overflow for this specific purpose, it works just fine for self-clearing floats. If you can't use overflow, there is a second option. The second option involves using a CSS snippet, created and maintained by many in the developer community. The current version looks like this. This group of CSS styles needs to be added to the parent of the floated elements. It's commonly referred to as the clearfix hack, but it's important to note that clearfix is just the class name, and it can be changed if you want.
What's important is this after pseudo element, and the CSS contained within the block. This is used to add styles to the space that comes after the element to clear the float. We'll be going into more detail about after later on in this course. Here's a resource that has documented the different versions and iterations over the years, as browser support has changed. The current snippet works for all modern browsers, but if you need to support older browsers, this is a great resource. There is a newer option for layouts, called flexbox.
This resource canIuse.com is great for checking browser support for new CSS properties. I've just applied flexbox in this search box right here, and here you can see information about browser support, as well as resources. So while browser support from flexbox is pretty good, this is a newer technique, so it's good to know how to use the more traditional methods that we've just discussed. But if you'd like to learn more about flexbox, feel free to check out some of the resources in this tab.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property