Force margins to collapse on floating elements?

Question

I am trying to figure out a way to collapse margins on floated divs.

Dividing the margin side by 2 won't work… The divs' margins need to collapse b/c each div needs a different margin size (in order to look correct & be pixel-perfect against the design).

Absolute positioning won't work… The divs need to be in-flow so text won't clip against the divs.

Inline-block might not work… Some of these divs need to be aligned against the bottom of their parent, while still having text flow around them. I haven't been able to figure out how to accomplish this with inline-blocks instead of floats.

Is there anyway to accomplish collapsed margins on floats?

edit: If this reads as purposefully-vague, that's because I'm trying to save you all the massive headache of considering the whole nightmare-of-a-design that I'm trying to implement.

edit 2: After writing this, I just realized how to solve my particular problem without having to collapse margins on floats, although I would still like to know if it is even possible!

Answer 1

Basically what you have to do is add a bit more markup.

You can enable margin-collapse on floated elements by wrapping the floated element in a div with the desired margin declared.

I explain in further detail and give an example here http://codepen.io/nicksaemenes/pen/moutp

Answer 2

Andy Budd said a long time ago:

If you float a box, its margins no longer collapse.