Question

好的，所以我正在阅读有关花车的信息。如果某些内容浮动，那么它之后的内容会浮动在浮动元素周围：

HTML：

<div class='block pink float'></div>
  <div class='block blue float'></div>
  <div>Mr. Chairman, we have in this country one of the most corrupt institutions the world has ever known. I refer to the Federal Reserve Board and the Federal reserve banks. The Federal Reserve Board, a Government board, has cheated the Government of the United States and the people of the United States out of enough money to pay the national debt. The depredations and the iniquities of the Federal Reserve Board and the Federal Reserve banks acting together have cost this country enough money to pay the national debt several times over. ...

Some people think the Federal reserve banks are United States Government institutions. They are not Government institutions. They are private credit monopolies which prey upon the people of the United States for the benefit of themselves and their foreign customers, foreign and domestic speculator sand swindlers, and rich and predatory money lenders. ...

Those 12 private credit monopolies were deceitfully and disloyally foisted upon this country by bankers who came here from Europe and who repaid us for our hospitality by undermining our American institutions. Those bankers took money out of this country to finance Japan in a war against Russia.They created a reign of terror in Russia with our money in order to help that war along. They instigated the separate peace between Germany and Russia and thus drove a wedge between the Allies in the World War. ...

Every effort has been made by the Federal Reserve Board to conceal its power but the truth is the Federal Reserve Board has usurped the Government of the United States. ...

Mr. Chairman, when the Federal reserve act was passed the people of the United States did not perceive that a world system was being set up here which would make the savings of an American school-teacher available to a narcotic-drug vendor in Macao. They did not perceive that the United States was to be lowered to the position of a coolie country which has nothing but raw materials and heavy goods for export. That Russia was destined to supply man power and that this country was to supply financial power to an international superstate--a superstate controlled by International bankers and international industrialists acting together to enslave the world for their own pleasure.</div>
  <div class='block orange'></div>

CSS：

.float { float: left; }

.block {
    width: 200px;
    height: 200px;
}

.pink { background-color: #ee3e64 }
.blue { background-color: #44accf }
.green { background-color: #b7d84b }
.orange { background-color: #E2A741 }

结果如我所料：https://jsfiddle.net/vejxdn4z/

但是现在如果我改为HTML：

  <div class='block pink float'></div>
  <div class='block blue float'></div>
  <div class='block green'></div>
  <div class='block orange'></div>

我明白了：https://jsfiddle.net/gseqx6w7/

为什么粉红色和蓝色位于其他位置之上并且与第一个结果的作用不同？

Answer 1

来自MDN

文本和内联元素将环绕它。

您的所有.block元素，因为它们是<div>，它们是block elements

知道block elements通常被放置在另一个之下，就像块一样。

那么你的第二个小提琴会发生什么：

两个浮动的.block在正常流程之外彼此相邻放置，.block的其余部分按照正常流程放置为正常block elements ，也就是说，一个在另一个之下，就好像两个浮动的.block不存在一样。

这也发生在您的第一个小提琴中，只是您没有看到实际的块位于两个浮动块之下，您只看到包裹浮动块的文本。

我添加了一些颜色，所以你可以看到它在两种情况下都会发生：

https://jsfiddle.net/mkarajohn/vejxdn4z/1/

在你的第二个小提琴中，如果你想将其余的块放在两个浮动块的旁边，你应该将display: inline-block添加到他们的CSS

Answer 2

当您放置＆＃34;＆lt; DIV＆GT; ...文本文本文本＆lt; / DIV＆GT;＆＃34;所以橙色块被识别为一个块元素，所以浮动左下角，它没关系，它只需要一个blockin元素来产生这种效果，所以当你放置一个

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

这与文本具有相同的效果，但不同之处在于此时橙色低于粉红色块元素。

如果您决定在每种情况下删除第三个div，您会发现它们的行为方式相同。

浮动的内容漂浮在周围，一个在下面

2 个答案: