Question

从CSS规范中，我可以得出以下结论：

由于没有浮子，因此在浮子之前和之后创建的未定位块盒会垂直流动，就好像该浮子不存在一样。

因此，这意味着在浮动元素周围的任何未定位，未浮动的相邻元素应表现为好像该浮动元素不存在，对吗？如果前一个元素不包含任何内容，它将非常有效。但是一旦有了一些文本，该文本就会出现在float元素的下面，它不应该并且应该移动到float元素的下面。

<head>
  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    width: 40%;
  }
  div {
    padding: 2px;
    background-color: brown;
  }
  section {
    margin-left: 5px;
    padding: 2px;
    background-color: dodgerblue;
  }
  </style>
</head>
<body>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <div id="right">
    FOOBAR
  </div>
</body>

在此处，“ FOOBAR”文本出现在浮动部分的下方，并且不会在其下方移动。即使我们删除FOOBAR div的宽度，它也会出现在浮动元素的右侧，而不是在其下方。

相邻元素实际上如何围绕浮动元素工作。我尝试了很多视频，但似乎都没有解释。

Answer 1

                                  YOUR ANSWER

float元素永远不会与内联元素重叠，这就是为什么FOOBAR不显示在floated元素下的原因。这是因为float元素最初是为了使文本环绕图像而不重叠而产生的效果。

                   WHY AND HOW THINGS ARE DISPLAYED IN YOUR EXAMPLE ?

每个文本都在CSS的line box中。根据CSS规范，浮动元素可能会介于容器的边缘和线盒的边缘之间。在这种情况下，行框将在其中容纳尽可能多的单词，并产生包裹浮点元素的文本效果。在您的情况下，FOOBAR的线框不能容纳FOOBAR，除了浮动元素外，没有空格。因此，行框在浮动元素下方分解，因此FOOBAR在浮动框下方的行框内显示。 -

相邻元素实际上如何围绕浮动元素工作？的CSS

1 个答案: