如何解决float:left图片导致后续反馈区块环绕显示的问题

问题根源 #

给图片设置float: left后，图片会脱离标准文档流，其后的所有非浮动元素默认会环绕浮动元素排列，因此反馈区块会显示在图片右侧未被占用的空间。用<br>和 临时补位的方式适配性极差，不同屏幕尺寸下很容易出现布局错乱。

正确实现方法 #

推荐两种常用的兼容方案：

方案1：快速清除浮动（适合小范围修改）

直接给反馈区域的标题添加clear: both属性，即可强制该元素跳过所有浮动元素，显示在图片下方：

/* 给Feedback对应的标题添加清除浮动样式 */
.title:nth-of-type(2) {
  clear: both;
}

如果希望所有的.title类元素都不环绕浮动元素，也可以直接给.title类统一加属性：

.title {
  text-align: center;
  clear: both;
}

方案2：clearfix闭合浮动（更规范，易维护）

把浮动的图片和简介内容包裹在同一个父容器内，给父容器添加清除浮动的伪元素，父容器会自适应浮动元素的高度，其后的所有元素自然会排在整个简介区块的下方，不会出现环绕问题：

1. 先修改HTML结构，新增父容器包裹图片和简介：

<div class="about-wrap">
  <img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
  <article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! <a href="">Join us now!</a></article>
</div>

2. 给父容器添加clearfix样式：

.about-wrap::after {
  content: "";
  display: block;
  clear: both;
}

两种方案任选其一即可实现你需要的布局效果。

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