如何阻止设置负text-indent的文本覆盖float浮动元素？

要让整个段落移到黄色浮动框下方，无需修改display为flex/grid这类会中断文本流的属性，只需给段落样式添加clear: left即可。这个属性专门用来清除左侧浮动元素的影响，会让元素自动移动到浮动元素下方，同时保留原本的文本流特性。

修改后的代码 #

CSS #

.myfloat {
  float: left;
  width: 420px;
  height: 100px;
  background: yellow;
}

.hanging-indent {
  text-indent: -20px; /* 首行左缩进 */
  margin-left: 20px; /* 后续行偏移对齐 */
  width: 400px;
  clear: left; /* 清除左侧浮动，让段落移到浮动框下方 */
}

HTML #

<div class="myfloat">
</div>

<p class="hanging-indent">
    L ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.    Lo ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.
</p>

原理说明 #

原本段落会默认环绕左浮动的黄色框，而悬挂缩进的负text-indent让首行开头跑到了浮动框的区域内，造成视觉上的覆盖。添加clear: left后，段落会被强制放置在左侧浮动元素的下方，彻底避免了环绕和覆盖问题，同时完全保留了原本的文本流与悬挂缩进效果。

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