CSS ELI5: Float: Left;

Suppose I have an inline SVG that I want to take up the entire width and height of the viewport. I also want to leave overflow visible for the container of my SVG-- this is so that scrollbars will appear when users of my webapp create SVG shapes that extend past the boundaries of the viewport.

So I set the body's margin to 0, I set my SVG's width and height to the viewport width/height (plus setting viewBox to "0 0 $width $height").

If I'm in quirksmode I'm done.

If I'm not in quirksmode, I get unexpected scrollbars unless I set the SVG's style to "float: left;".

So what is "float: left;" doing to save the day? And why is old quirks web the web of least surprise in this case while HTML5 requires me to do CSS incantations to fit an element precisely inside a cavity?

Edit: clarification