Need a help with floats!

Hey guys! I'm practicing floats on my own and there is definitely something wrong with my boxes when I shrink it, because at some point box 3 just getting taller (it is not noticeable if you widen or shrink it fast but I would like to know solution for that...)

HTML <div class="container clearfix"> <div class="box left"> <h1>BOX ONE</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> <div class="box left"> <h1>BOX TWO</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> <div class="box left"> <h1>BOX THREE</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> </div>

CSS

• { margin: 0; padding: 0; box-sizing: border-box; }

.box { border: 5px solid red; background-color: aqua; width: 33.3333%; padding: 10px; text-align: center; }

.left { float: left; }

.clearfix::after { content: ''; display: table; clear: both; }

Even though, I've tried to add border box to universal selector still it was not calculating itself.. I had to use calc or make it more precisely. Please anyone who can test it let me know what is the problem Thanks!