[分享]css3文字浮动在图片

CSS3中提供了许多新的样式属性，其中包括文字浮动在图片上的样式。使用这个样式，可以让图片与文字更加贴合，视觉效果更加出众。img { float: left; marginright: 20px; ...

CSS3中提供了许多新的样式属性，其中包括文字浮动在图片上的样式。使用这个样式，可以让图片与文字更加贴合，视觉效果更加出众。

img {
    float: left;
    margin-right: 20px;
}

p {
    overflow: hidden;
} 

如上所示，通过设置图片的float属性为left，可以让图片浮动到文字的左侧，而margin-right属性可以为两者之间设置一定的距离，避免出现重叠的情况。

针对文字的样式，可以通过设置父元素（比如p标签）的overflow属性为hidden，让文字区域自动适应图片大小并且不会超出图片边界。

需要注意的是，如果文字长度较长，可能会把图片推到下一行，导致排版不美观，解决办法是限制文字长度或者调整图片和文字的比例。

总体来说，利用CSS3中的浮动样式可以让图片和文字更加和谐地融合在一起，营造出更好的视觉效果。