css - 浮动混乱

Question

为什么这个小提琴中的橙色盒子没有和我的其他盒子一起漂浮在左边？我确信橙色盒子应该从流中取出并漂浮在蓝色盒子旁边。我错过了什么？

  <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

工作小提琴

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>

演示

Answer 4

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

.Whatever {
    display: inline-block;
}