As we begin to learn to build web layouts it is helpful to understand what the float property is. If you've created print designs - you may see they are similar to text wrapping in other programs. Because images are inline, they require floating to ensure the text wraps around the images. You'll notice this approach for images and text is similar to what you may have experienced with a text wrap in other design programs.
As we use floating you will want to also include a width for most elements you float, especially when it pertains to building layouts. If you do not, it may cause the element not to float.
In prior experiences, you may have used the clear property in basic layouts applied to a new element such as a div or footer, however, as coding evolves, best practices also change. This is where the clearfix method comes in - it is considered the most common method to "clear" floats today.
Web designers using floating and clearing prefer the clearfix "hack" because it helps reduce empty tags and makes your use of html elements more relevant to what you're building.
We may use clearfix multiple times in our layouts so it is common to apply it in ADDITION to the class to define other styles (i.e. background colors, type, borders, etc). This allows us to code more efficiently. So just know the use of the "box1" class gives you flexibility to add additional styles so it may look different than another section of your web site.
The use of .clearfix becomes your class name and :after is the pseudoclass used to tell the browser to ensure all elements after this element ignore the floats.
Again, floating is a great option, however, it can create buggy displays of all content following our pages so this is essential to use. This method clears both sides so whatever is inside the containing element will be cleared but the floats inside the containing element will continue floating side by side.