防止内容环绕浮动元素

I am well aware of the concept of "overflow" in HTML/CSS. But here I am stuck at a very simple issue.

我很清楚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>

My wrapper div consists of aside and section.I tried to align them side by side with total width of the container. But it always appear that section overflows.I wonder why? The total width of aside plus section has never crossed width of its wrapper container.It only works if I put overflow:hidden in the section.

我的包装div由旁边和section组成。我试图将它们与容器的总宽度并排对齐。但它似乎总是溢出。我想知道为什么？旁边加段的总宽度从未超过其包装容器的宽度。仅当我将溢出：隐藏在该部分中时才有效。

1 个解决方案

#1

All you need to do to overcome the effect of the section overflowing is to set overflow to auto on the section. Now you will not need to set float on the section,...

要克服溢出部分的影响，您需要做的就是在该部分上设置溢出为auto。现在你不需要在节上设置浮点数，......

#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>

but be aware of the fact that if the content (any child elements) of section are extending the boundary of section will cause scrollbars on the section. So keep that in mind. You could as well use overflow:hidden which will work as well in your situation, but then any content that exceeds the boundary of section will be hidden. In case of overflow:hidden you could do the following to prevent this behavior. An example with an image as a child element of section could look like this.

但请注意，如果节的内容（任何子元素）正在扩展，则节的边界将导致节上的滚动条。所以记住这一点。您也可以使用overflow：hidden，它在您的情况下也可以正常工作，但是任何超出section的边界的内容都将被隐藏。如果出现溢出：隐藏您可以执行以下操作以防止此行为。将图像作为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>