Learn about how the float property affects the surrounding elements.
- [Instructor] In the last example, we applied the clear property to a specific element, to return the page back to its normal flow. But what if there's no element to apply the clear to? In this example, the blue box is floated left and removed from the normal flow. The parent does not recognize the height of the floated element, and will only wrap around the elements that do not have a float applied to it, the paragraph, in this example. If all the elements within the parent is floated, the height of the parent container will collapse to zero. Even elements that are not in the same container as the float will be effected. As long as there is space, the following containers, and all of its child elements, will try to stack underneath, as if the floated element wasn't even there. But the content will still flow around the floated element. In these scenarios, where there is no element to apply a clear to, we'll have to self-clear the float in the parent element instead. There are three options. Option one, use the overflow property. While this is a common technique for self-clearing floats, overflow is actually used to specify how to display content that doesn't fit in its container. Let's take a quick look at how overflow works. When size dimensions are added to a containing element, there may be times where the content may extend past its dimensions. If that happens, the content will flow outside of its container. Different overflow values can be used to determine how to display the overflow of content. Hidden clips the overflow of content, this may be used for decorative content, like an image, but isn't very useful for text since clipped content can't be accessed. Auto adds a scroll bar, but only when there is overflowing content. Scroll will always show a scroll bar on the X and Y axis, even when the content does not flow outside of its container. If you're using the macOS X line or newer, the system's default scrolling feature overrides this behavior. You may not see a scroll bar until you try to scroll the content. It's not necessary to change these settings, but if you want to, it can be found under system preferences, general, then choose always under show scroll bars. For the most part, overflow works fine for self-clearing floats, but in the cases where you need to work with overflowing content, this technique for self-clearing floats may conflict. Another option is to add a specific CSS snippet, often referred to as the clearfix hack. This group of CSS styles need to be added to the parent of the floated elements. When adding the class to the HTML, do not include the colon after. This is a pseudo element and is used in conjunction with another selector. This fix has been created and maintained by the developer community, and if you're curious, the history of this fix can be found in this CSS tricks article. While this fix is commonly referred to as the clearfix hack, it's important to note that clearfix is just the class name. If you want to use another class name, just make sure it matches in the CSS and the HTML. A newer way is in the works to solve the problem, using the display property with a value of flow-root. While this provides a solution, it is not currently supported by all modern browsers, and is still in the draft phase. Can I use is a great reference for checking browser support. Just do a search for any CSS property, and the search results will show you the browser support. There is also additional information, such as known issues or any additional resources. Let's look at a codepen example, and try out these three options. First, we'll add the float to the blue box. Let's go down to line 19 and add the style in. This will make the container collapse, since the only child elements are now floated. The black outline no longer wraps around the floated boxes. We can self-clear this float by adding the overflow property to the containing element. We looked at several values, but I like to use hidden to make sure no scroll bars will show. Now the black outline representing the parent element wraps around the floated elements. The newest option uses the display property. Let's hide the overflow property and add display flow-root instead. Now let's comment on the display property and try the clear-fix option. For this option, the clear-fix style has already been added here, so all we have to do is add this class to the parent element. To recap, depending on where your element is floated, you may need to clear the float on a neighboring sibling element, if one exists in the layout. If it doesn't, then self-clearing the float on the parent element using one of these three options we just discussed will be required.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts