css - 防止内容环绕 float 元素

Question

我很清楚 HTML/CSS 中“溢出”的概念。但在这里我陷入了一个非常简单的问题。

    #wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
    }
    section {
      width: 70%;
      text-align: justify;
    }

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section</section>
</div>

我的包装器 div 由 aside 和 section 组成。我试图将它们与容器的总宽度并排对齐。但是总是出现那部分溢出。我想知道为什么？ aside plus section 的总宽度从未超过其 wrapper container 的宽度。只有当我在 section 中放置 overflow:hidden 时它才有效。

Answer 1

要克服 section 溢出的影响，您需要做的就是在该部分上将 overflow 设置为 auto。现在你不需要在 section 上设置 float,...

#wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
      background: green;
    }
    section {
      width: 70%;
      text-align: justify;
      overflow:auto;
      background: red;
    }

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section>
</div>

但请注意，如果 section 的内容(任何子元素)扩展了 section 的边界，将会导致 section< 上出现滚动条。所以记住这一点。您也可以使用 overflow:hidden ，它在您的情况下也能正常工作，但是任何超出 section 边界的内容都将被隐藏。在 overflow:hidden 的情况下，您可以执行以下操作来防止此行为。将 image 作为 section 的子元素的示例可能如下所示。

#wrapper {
    width: 100%;
}
aside {
    width: 30%;
    text-align: justify;
    float: left;
    background: green;
}
section {
    width: 70%;
    text-align: justify;
    background: yellow;
    overflow:hidden;
}
section img {
    width:100%;
    height: auto;
}

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.
    <img src="http://placehold.it/1000x1000" />
  </section>
</div>