文字环绕浮动元素

原理

巧妙运用浮动元素不会压住文字的特性

案例

html

<div class="box">
  <div class="pic">
    <img src="images/img.png" alt="">
  </div>
  <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
</div>

css

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 300px;
  height: 70px;
  background-color: red;
  margin: 0 auto;
  padding: 5px;
}
.pic {
  float: left;
  width: 120px;
  height: 60px;
  margin-rgiht: 5px;
}
.pic img {
  width: 100%;
}