Why does float right affect layout of items below it?

Question

<div class="pull-xs-right">
    <i class="sf-icon-add-new grow clickable icon-large au-target" click.delegate="controller.addListItem()" aria-hidden="true" au-target-id="82"></i>
        <i class="sf-icon-save grow clickable icon-large" aria-hidden="true"></i>
</div>

This works to pull the icons to the right, which just uses float: right.

The issue is that when using this, the div does not seem to occupy the normal flow, so content below it is underneath part of the icon. As if the padding or margins were no longer respected.

If I take the float off of it, then it moves to the left, and the padding and margins is as usual.

Why is this? How to I make the layout the same as if it were on the left?

Answer 1

Because that's the entire point of floats.

9.5 Floats

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the clear property).

If you want to prevent the div from collapsing vertically, see Floating elements within a div, floats outside of div. Why?

Answer 2

add class clearfix to the subsequent element.