Float styling is a useful aspect of CSS … until it’s not. When a floated element occurs inside a container and you want it to be wholly in that container you have to resort to hacks to do so. Or do you? Never content to assume that a question has been resolved, I decided to see if anyone had come up with a new method of clearing a float. Lo and behold a solution has emerged, and the solution is so simple as to defy logic: apply overflow: auto to the container element. I’ll leave the full explanation (with examples, alternatives, and warnings) to the experts.
Of course, there can be advantages to the default float rendering. Most notably I found it useful for creating some nice formatting around blockquotes, such as in our textbook analysis report.