文字环绕图片的实现

想实现文字环绕图片的效果要用float

要点：使用float实现，float最初的作用就是用在环绕。

让文字向左浮动，然后图片向右浮动

HTMl部分

<div class="dc-left-text">
	前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
	<img class="dc-left-img" src="Img/配图三.png" />
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
</div>

CSS部分：

.dc-left-text{
	width: 428px;
	text-transform: capitalize;
	margin-top: 10px;
	float: left;
}
.dc-left-img{
	float: right;
  	padding: 20px 0 20px 20px;
}

首字下沉效果：

.dc-left-text::first-letter {
	font-weight: bold;
	font-size: 70px;
	color: #F5E327;
	font-family: "微软雅黑";
	float: left;
	margin-right: 10px;
}

首字下沉效果主要使用伪类