Bug - 从第二个元素开始向左浮动，而不是从div开始

Question

我对浮动元素有一个奇怪的问题。心脏的浮动左侧属性正在浮动，好像div的开头来自下方的添加到行李按钮，而不是最左边的div的开头，在黄色框下方为1英寸它。

所有三个元素都具有float-left属性，并且它们的父div具有来自Bootstrap的clearfix类。我认为任何其他CSS都不会影响他们的定位。

html的

<div class="clearfix">
 <div class="pull-left">1 dropdown box</div>
 <div class="pull-left">add to bag button</div>
 <div class="pull-left">heart</div>
</div>

它们通常彼此相邻排列，但在较小的屏幕上，add to bag按钮会按下底线上的心形按钮，这个想法就是当它被推到下拉数量时。

有什么想法吗？

Answer 1

您可以将Breakpoint用于随后使用的小屏幕尺寸

poistion:relative;

在css中

@media screen max-width:480px;{
    position:relative;
} 

Answer 2

不要使用float（改为使用display:inline-block）并解决它。如果你想使用浮点数，你需要重新构造html。您可以创建一个包含小屏幕和大屏幕类的简单网格，以便您更好地控制行为。