一、CSS文字环绕图片的基础
1.1 浮动（Float）
1.2 清除浮动（Clear）
在浮动布局中，清除浮动是非常重要的。可以使用clear属性来避免浮动元素对后续元素的影响。
二、实现文字环绕图片的步骤
2.1 准备HTML结构
<div class="container">
<img src="image.jpg" alt="描述性文字">
<p>这里是文字内容，文字会围绕图片布局。</p>
</div>
2.2 设置CSS样式
.container {
width: 100%;
text-align: center; /* 使文字居中 */
}
.container img {
float: left; /* 使图片左浮动 */
margin-right: 20px; /* 设置图片与文字的距离 */
}
.container p {
margin: 0; /* 去除段落默认的上下外边距 */
}
2.3 清除浮动
为了防止浮动元素影响后续元素，我们需要在文字容器之后添加一个清除浮动的元素。
<div class="clear"></div>
.clear {
clear: both; /* 清除左右浮动 */
}
三、优化布局
3.1 响应式设计
为了确保在不同设备上都能有良好的显示效果，我们可以使用媒体查询来实现响应式设计。
@media (max-width: 600px) {
.container img {
float: none;
width: 100%; /* 使图片宽度为100% */
margin: 0 0 20px; /* 设置图片与文字的距离 */
}
}
3.2 文字排版
.container p {
font-size: 16px;
color: #333;
line-height: 1.5;
}