Greg Gum Greg Gum - 2 months ago 6
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>
</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

add class clearfix to the subsequent element.