Why does CSS want to clear floating?

These two days in writing static Web pages, there are some questions about clear floating. Check out "Mastering CSS" solves the problem.

1 <div class= "Nav_cont" >2 3 <ul class= "Navcont_list" >4 <li><a href= "#" > All Phones </a></li>5 <li><a href= "#" >1080p HD </a></li>6 <li><a href= "#" > Dual sim phone </a></li>7 <li><a href= "#" > Photo artifact </a></li>8 <li><a href= "#" > Old phone </a></li>9 <li><a href= "#" > Walkie-talkie </a></li>Ten <li><a href= "#" > Unicom zone </a></li> One </ul> A </div>

Where the <li> tag is set to float left. If you do not clear the float on the "navcont_list" (that is, the UL container), the effect will be the same.

But after the float is cleared,

It becomes

CSS is the exact words: because floating elements do not occupy space, the container elements do not surround them. Adding an empty element for cleanup can force the container element to surround the floating element.

Why does CSS want to clear floating?