如何裁剪浮动内容？实现滚动时截断末尾浮动图标

我做了一个带固定高度和滚动功能的容器，里面左侧浮动了若干图标，右侧是文本条目。当前滚动至底部时，文本已经显示完毕，但多余的图标仍会暴露出来；我希望文本条目结束后，超出的图标能被完全裁剪。另外我使用float属性是为了在图标数量不多时，文本可与图标形成自然的流式环绕布局。

效果说明 #

• 当前效果：滚动到底部时，文本已显示完，但下方仍有未被裁剪的粉色图标残留
• 期望效果：滚动到底部时，文本显示完毕后，多余图标完全被裁剪，无残留
• 流式布局效果：图标数量较少时，文本会环绕在图标右侧，形成流畅的排版

原代码示例 #

CSS #

.parent {
  position: absolute;
  height: 100px;
  width: 400px;
  overflow: scroll;
}

.content {
  background-color: cyan;
  padding: 6px;
}

.icon {
  float: left;
  clear: both;
  background-color: lightpink;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  margin-bottom: 6px;
}

.entry {
  font-size: 18px;
}

HTML #

<div class="parent">
  <div class="content">
    <img class="icon">
    <img class="icon">
    <img class="icon">
    <img class="icon">

    <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div>
    <div class="entry">Mauris in libero lacus</div>
  </div>  
</div>

通过给文本区域创建独立的块级格式化上下文（BFC），限制浮动图标的影响范围，即可实现文本结束后裁剪多余图标的需求，同时保留流式布局效果。

修改后的代码 #

CSS #

.parent {
  position: absolute;
  height: 100px;
  width: 400px;
  overflow: scroll;
}

.content {
  background-color: cyan;
  padding: 6px;
}

.icon {
  float: left;
  clear: both;
  background-color: lightpink;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  margin-bottom: 6px;
}

.entry-container {
  overflow: hidden; /* 触发BFC，锁定文本区域的布局范围 */
}

.entry {
  font-size: 18px;
}

HTML #

<div class="parent">
  <div class="content">
    <img class="icon">
    <img class="icon">
    <img class="icon">
    <img class="icon">

    <div class="entry-container">
      <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div>
      <div class="entry">Mauris in libero lacus</div>
    </div>
  </div>  
</div>

原理说明 #

• entry-container的overflow: hidden触发了BFC，使文本区域形成独立的布局上下文，会完全占据浮动图标右侧的所有空间，同时限制浮动图标只能在该容器的左侧区域排列。
• 当文本容器结束后，下方的浮动图标失去了文本区域的支撑，父容器的overflow: scroll会直接裁剪掉超出文本范围的图标，达到预期效果。
• 图标数量较少时，文本仍会自然环绕在图标右侧，保留了原有的流式布局特性。

内容的提问来源于stack exchange，提问作者Andrew Parks