漂浮混乱

Question

为什么这个fiddle中的橙色框与其余的框没有浮动到左边？我确定橙色盒子被假定为从流动中取出并漂浮在蓝色盒子旁边。我错过了什么？

  <div class=" wrap clear">
        <div class="block pink float"></div>
        <div class="block blue float"></div>
        <div class="block green"></div>
        <div class="block orange float"></div>
    </div>

Answer 1

Working Fiddle

div默认阻止其他元素并排，但可以使用CSS更改此行为。如果你想要你的橙色盒子，那么你可以改变你的安排。因此，绿色div将无法推动那个橙色。任何将在绿色之后放置的div将在下一行。

Answer 2

这是因为你没有漂浮绿色的盒子。因此绿色框显示块级别并按下橙色框。

Answer 3

现在替换为您的html代码Live Demo --------- Full Demo

 <div class=" wrap clear">
            <div class="block pink float"></div>
            <div class="block blue float"></div>

            <div class="block orange float"></div>

     <div class="block green"></div>
        </div>

<强> Demo

Answer 4

看到此链接，我希望这对您有所帮助。 jsfiddle.net/GBdDU/5 /

Answer 5

所有块级元素都位于各自的行上，并且不允许任何其他元素位于它们的左侧或右侧。虽然元素是浮动的并且被视为块级别，但它已从正常页面流中移除，不再位于其自己的行上。将块级元素放在浮动元素旁边的快速解决方案是将以下css规则添加到所需元素：

.Whatever {
    display: inline-block;
}