css – 防止内容环绕浮动元素

2023年5月16日 275次阅读

我很清楚
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由旁边和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>

但要注意这样一个事实,即如果节的内容(任何子元素)正在扩展,则节的边界将导致该节上的滚动条.所以记住这一点.您也可以使用overflow：hidden,它在您的情况下也可以正常工作,但是任何超出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>
点赞