Floats are a CSS positioning property. They can be used to create fluid layouts for the web. They are also used to wrap text around images. For this project, we will focus on basic float layouts and float clearing.
When you float elements, they will either float to the left or to the right (not up or down) and will always move to the edge of its parent container.
This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.
Notice how the text wraps around the floated element? Any elements after the floated element will simply flow around it. The same would apply if it were floated to the right as well:
This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.
One of the ways you can control floated elements is by using negative margins. In this example, we'll use margin-left to make our floated element have an overlapping effect.
This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.
If you play with the negative margins, you'll notice that you can tug and pull the floated element. Also, by using this trick, you can make way for some nice visual effects on a website!
Whenever floats are used, its parent container will NOT automatically expand to adjust to the floated elements inside. Unfortunately, you must always clear the containing element so that it doesn't collapse. One of the best ways to clear floats is by using a clearfix.
Now, you might be wondering, "How does a parent container collapse?" Well, looking below, you'll see what happens when floats are not cleared:
Notice how the floated element is outside the containing box? That's because the parent container doesn't recognize the floated element within itself. Which results in the parent container not knowing how to properly expand and "clear" the floats.
Well fear not, because all you need to do is add the clearfix to the parent container! Now you can see that the floated element is properly contained.