1

我认为如果文本在标记中跟随该元素，则文本将围绕浮动元素流动。那么为什么下面的例子会产生显示的结果呢？

这是HTML：

<div class="float block red">Red</div>
TEXT BETWEEN RED AND BLUE
<div class="float block blue">Blue</div>
<div class="float block green">Green</div>

和CSS：

.float{
    float: left;
}
.block{
    width: 50px;
    height: 50px;
}
.red{ background-color: red;  }
.blue{ background-color: blue; }
.green{ background-color: green; }

这是结果：

结果

为什么屏幕上没有顺序：红色、红色和蓝色之间的文本、蓝色、绿色？

谢谢

4

2 回答 2

4

“一个浮动框位于正常流中，然后从流中取出并尽可能向左或向右移动。内容可能会沿着浮动的一侧流动。[...] 当一个盒子从正常流中取出时，所有仍在正常流中的内容都会完全忽略它，不会为它腾出空间。”</p>

资源

这是因为您正在浮动左侧的元素。您实质上是在说这些元素相对于其他浮动元素将尽可能位于页面的左侧。您的文本不是浮动的，因此是相对于最右边、最左边的浮动元素。那有意义吗？

要达到您想要的结果，只需将文本放入 DIV、SPAN 等中并将其也向左浮动。

于 2012-05-04T14:17:30.427 回答
1

CSS中有两种元素：块级元素和内联元素。这些元素及其位置由称为流的概念控制。

块级元素前后都有断点，内联元素没有。虽然这过于简单化了，但这些是在 CSS 中管理流的基本规则。

给定position:fixed的元素和给定float属性的元素在正常意义上从流中删除，另外需要注意的是内联元素和文本将环绕浮动元素。

如果你可以把一个浮动元素想象成一​​个盒子，它在物理上将自己抬离地面，向左或向右飞行，直到它不能再往前走，然后又扑通一声回到地面上，你的想法是正确的（想想星际争霸中的人族基地）。浮动元素从您的文本中吹出，然后您的文本会重新定位，以在浮动的内容“着陆”后将其包裹起来。

浮动总是相对于其他浮动定位自己。

一个例外是当一个元素clear粘在它上面时。CSS clear 属性基本上表示任何块级元素将允许浮动在一侧或另一侧，否则将浮动元素踢到下一行。它实际上比这要复杂一些，你应该查看MDN 关于 Clear 的文章。

于 2012-05-04T14:24:44.220 回答