Greg Gum Greg Gum - 17 days ago 5x
CSS Question

Why does float right affect layout of items below it?

<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>

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?


add class clearfix to the subsequent element.