如何让后续段落元素环绕前置图片进行排版？

你当前的场景是：设置了float:right的图片和段落同属.container容器，段落已开启两端对齐，但图片旁存在大片空白，下一段无法填充该区域，且给容器添加clear:both属性无效。

问题原因 #

clear:both的作用是清除元素自身受到的浮动影响，把它用在容器上，反而会让容器忽略内部浮动元素的布局，自然解决不了空白问题。要让段落填充空白，需要让段落识别浮动元素的存在，利用**BFC（块级格式化上下文）**来实现文本环绕填充。

具体解决方案 #

方案1：给所有段落添加BFC触发样式

直接修改段落的CSS，添加overflow: hidden或overflow: auto，触发BFC后，段落会自动填充浮动元素旁的剩余空间：

p {
  text-align: justify;
  text-justify: auto;
  overflow: hidden; /* 也可以用 overflow: auto，效果一致 */
}

方案2：给需要填充的段落单独加类

如果不想影响所有段落，给目标段落自定义一个类，比如.fill-float-gap，再设置样式：

.fill-float-gap {
  overflow: hidden;
}

对应的HTML结构调整：

<div class="container">
 <img class="img-fluid" style="float: right;">
 <p>Text</p>
 <p class="fill-float-gap">Text</p>
</div>

补充说明

如果图片高度超过第一段，第二段原本就应该自动填充图片旁的空白，若没生效大概率是段落的默认margin或排版导致的，用BFC的方法可以快速解决这类浮动布局的空白问题。

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