To ensure floats are cleared inside a box, do we really have to add an empty element?

Hello Folks! I am a newbie to CSS design and presently reading CSS Mastery: Advanced Web Standards Solution by Andy Budd. The book, after explaining all about floats, goes on to a situation. clear:both can be used to clear all preceding floats, but if two divs are inside a container div and both are floating (such as one img and another p), then after them, we should place an empty element like this:

.clear { clear: both; } <br class="clear"/> 

I want to know whether this is correct design approach? Adding an html element just for styling doesn't sound like a great idea?

Thanks.

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted November 23, 2015 at 09:54PM by rms_returns http://ift.tt/1OoxzEB