html - 为什么右浮动会影响其下方元素的布局？

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 似乎没有占据正常的流，所以它下面的内容在图标的下面。好像填充或边距不再受到尊重。

如果我去掉它的 float ，它就会向左移动，填充和边距和往常一样。

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

Answer 1

因为这就是 float 的全部意义。

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

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