CSS

Question

我正在学习 CSS 中的浮动元素，我遇到了以下特殊行为。

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #one { background-color: red; width: 200px; height: 200px; margin: 10px; }
        #two { background-color: yellow; width: 200px; height: 205px; margin: 10px; }
        #three { background-color: lightpink; width: 200px; height: 200px; margin: 10px; }
        #four { background-color: green; width: 200px; height: 200px; margin: 10px; }
        #five { background-color: coral; width: 200px; height: 200px; margin: 10px; }
        #six { background-color: #b1ffea; width: 200px; height: 200px; margin: 10px; }

        div{
            /*display: inline-block;*/
            float: left;
            vertical-align: central;
        }


    </style>

</head>
<body>

   <div id="one">
       First div
   </div>

   <div id="two">
      Second div
   </div>

   <div id="three">
       three div
   </div>

    <div id="four">
       four div
   </div>

    <div id="five">
       five div
    </div>

    <div id="six">
       six div
   </div>

</body>
</html>

我的问题是为什么 "four div" 放在 "third div" 下面而不是第一和第二？

另一方面，如果我调整浏览器的大小（见下图），为什么在这种情况下它工作正常？

Answer 1

一切如常。 div2 的高度是 205px 而不是 200px。改成200px就可以了。

Answer 2

因为第二个 div 元素比第一个 div 高，第四个 div 与第二个 div 相撞。当第四个div落到下一行时，它从右边开始向左滑动，从第三个div下面开始，直到它与第二个div相撞。如果您查看每行 4 个 div 元素的代码，第五个 div 会掉到下一行。它从第四个 div 下方开始并开始向左移动，直到它与第二个 div 碰撞，因为第二个 div 比第三或第四个 div 元素长。

Answer 3

我使用 Inspect 调整了 #two 的 CSS 边距...

更改后，当浏览器的 window 宽度调整后，div 元素的行为似乎都符合您的要求。

CSS - 意外的浮动问题

CSS - unexpected floating issue

html

css-float