I’ve got several floated boxes with different heights. I’d like for everything to be pushed up together, but for some reason, it’s putting the next floated box at the same level as the bottom of the longest box.
Unfortunately, that’s not how floats work. The latest screenshot that you’ve provided is exactly what a user should expect with floated boxes that have “clears” properly applied to them. If you want lots of different boxes of different heights to all be together, you’ll have to go beyond CSS.