CSS 模拟float实现center文字左右环绕图片的效果

CSS模拟float实现文字左右环绕图片效果通常有两种方式实现，分别是使用浮动和使用flex布局，下面我会详细讲解这两种方式的实现方法。

CSS模拟float实现文字左右环绕图片效果通常有两种方式实现，分别是使用浮动和使用flex布局，下面我会详细讲解这两种方式的实现方法。

使用浮动实现文字左右环绕图片效果

HTML结构

首先，我们需要先构建一个HTML结构，其中包含一个包含文字的容器div和一个图片img标签，如下所示：

<div class="container">
  <div class="text">Here is some text ...</div>
  <img src="example.jpg" class="image" />
</div>

CSS样式

接下来，我们需要为HTML元素定义CSS样式，其中.container元素应该使用相对定位来保证.text和.image元素能够正确地定位。.text元素应该设置一个宽度，并且使用float:left来实现文字环绕图片的效果。.image元素应该设置一个宽度，并且使用float:right来实现图片环绕文字的效果。最后，我们还需要使用clear:both来清除浮动。

.container {
  position: relative;
}

.text {
  width: 60%;
  float: left;
}

.image {
  width: 40%;
  float: right;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

使用flex布局实现文字左右环绕图片效果

HTML结构

同样，我们首先需要构建一个HTML结构，其中包含一个包含文字的容器div和一个图片img标签，如下所示：

<div class="container">
  <div class="text">Here is some text ...</div>
  <img src="example.jpg" class="image" />
</div>

CSS样式

接下来，我们需要为HTML元素定义CSS样式，其中.container元素应该使用flex布局，以使.text和.image元素能够正确地定位。.text元素应该设置flex-grow:1以占据所有可用的宽度，并且使用margin-right:20px来增加一些与图片之间的间距。.image元素应该设置一个固定的宽度，并且使用align-self:flex-start将其定位在容器的顶部。最后，我们还需要为容器的父元素设置宽度，以确保布局能够正确地呈现。

.container {
  display: flex;
  width: 100%;
}

.text {
  flex-grow: 1;
  margin-right: 20px;
}

.image {
  width: 200px;
  align-self: flex-start;
}

这样，在两种方式中，我们都成功实现了文字左右环绕图片的效果。