为什么向右浮动会影响其下方项目的布局？答案

【问题标题】：Why does float right affect layout of items below it?为什么向右浮动会影响其下方项目的布局？
【发布时间】：2017-02-17 17:37:07
【问题描述】：

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

如果我把浮动从它上面拿掉，那么它会向左移动，填充和边距和往常一样。

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

将clearfix 类添加到后续元素。

【讨论】：

【解决方案2】：

因为这就是浮动的全部意义所在。

9.5 Floats

float 是一个在当前位置向左或向右移动的框线。浮动（或“浮动”或 “浮动”框）是内容可能沿其一侧流动（或 clear 属性禁止这样做）。

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

【讨论】：