css制作图文混排原理
CSS 图文混排原理
图文混排主要通过 CSS 的浮动、定位、弹性布局或网格布局实现，核心是控制文本与图片的相对位置和环绕效果。
浮动（Float）实现环绕
使用 float 属性让图片浮动到左侧或右侧，文本自动环绕图片。需注意清除浮动以避免布局错乱。
img {
float: left; /* 或 right */
margin: 0 15px 15px 0; /* 添加外边距避免贴紧 */
}Flexbox 弹性布局
通过 display: flex 创建弹性容器，灵活调整图片与文本的排列方向和间距。
.container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 20px; /* 图片与文本间距 */
}Grid 网格布局
使用 CSS Grid 划分区域，精确控制图片和文本的位置。
.container {
display: grid;
grid-template-columns: auto 1fr; /* 图片固定宽度，文本自适应 */
gap: 15px;
}绝对定位（Absolute Positioning）
通过 position: absolute 将图片固定在特定位置，文本流不受影响。需父容器设置 position: relative。
.container {
position: relative;
}
img {
position: absolute;
top: 10px;
right: 10px;
}形状环绕（Shape-Outside）
使用 shape-outside 定义非矩形环绕区域（如圆形、多边形），实现创意排版。
img {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%); /* 裁剪图片匹配形状 */
}注意事项
- 响应式设计：使用百分比或
max-width确保图片适应不同屏幕。 - 间距调整：通过
margin或padding优化图文间距。 - 清除浮动：在浮动布局后添加
clear: both避免后续内容错位。
通过组合上述方法，可灵活实现多样化的图文混排效果。
