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>

这可以将图标向右拉，只使用float: right。

问题是，当使用它时，div似乎不占用正常流量，因此它下面的内容位于图标的下方。好像填充或边距不再受到尊重。

如果我把浮子从它上面移开，那么它会向左移动，并且填充和边距与往常一样。

这是为什么？如何使布局与左侧的布局相同？

Answer 1

因为那是花车的重点。

9.5 Floats

浮动是一个在当前向左或向右移动的框   线。浮动（或“浮动”或浮动）最有趣的特征   “浮动”框是指内容可以沿其侧面流动（或者是   clear财产禁止这样做。

如果您想阻止div垂直折叠，请参阅Floating elements within a div, floats outside of div. Why?

Answer 2

将类clearfix添加到后续元素。

为什么浮动权利会影响其下方项目的布局？

2 个答案:

9.5 Floats