如何使浮动元素后的段落不再环绕浮动布局？

当元素设置float属性后，后续的块级元素会自动环绕该浮动元素。要让指定段落及之后的内容不再环绕，只需使用CSS的clear属性清除浮动影响即可。

方法一：添加清除浮动的类（推荐） #

先在CSS中新增清除浮动的通用样式：

img {
  width: 100px;
  border-radius: 50px;
  float: left;
  margin-right: 10px
}

p.username {
  font-weight: bold;
}

/* 新增清除浮动的类 */
.clear-float {
  clear: both;
}

再给不需要环绕的段落添加这个类：

<img src="https://via.placeholder.com/100" alt="My picture" width="default" height="default">
<p class="username">@BilalKhan615</p>
<p>Getting started with HTML and CSS!</p>
<!-- 该段落不再环绕浮动元素 -->
<p class="clear-float"> Hello Everyone!</p>

方法二：内联样式（快速测试用） #

如果只是临时需求，也可以直接给段落添加内联样式：

<p style="clear: both;"> Hello Everyone!</p>

clear: both会同时清除左右两侧的浮动影响，确保元素不会被任何浮动元素环绕。如果只需要清除左侧浮动，也可以使用clear: left，但both的适用性更广。

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