0

我有这个简单的 HTML：

<body>          
    <div class="square" id="black"></div>
    <div class="square" id="yellow"></div>           
</body>

这是CSS：

.square {
    height: 50px;
    width: 50px;    
}

#black {
    background-color: black;            
    float:left;   
}

#yellow {
    background-color: yellow;          
}

据我所知，当一个元素浮动时，它会从页面流中取出。就好像浮动和非浮动元素相互忽略一样。所以黑色方块只是坐在黄色的顶部并隐藏它：

在此处输入图像描述

但是当浮动黄色方块时：

#black {
    background-color: black;                      
}

#yellow {
    background-color: yellow; 
    float:left;          
}

我们得到：

在此处输入图像描述

我试图弄清楚这背后的逻辑。html 中的元素排序和浮动机制如何协同工作？什么时候谁赢？

4

1 回答 1

1

W3C Float Spec实际上很好地回答了这个问题。

浮动是在当前行向左或向右移动的框...由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样.

这就解释了为什么浮动覆盖了第一个示例中的黄色框。

至于第二个例子，#black 是在内容流中display: block，因此有它自己的行。 #yellow在那种情况下是在另一条线上。

于 2013-02-14T02:34:00.957 回答