This easy clearing method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:
1 2 3 4 5 6 7 |
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } |
This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn’t quite the whole story, as additional code needs to be used to accommodate for older browsers.