CSS float属性实现文字环绕效果（小白必读）

文字环绕的方式在实际页面中应用的非常广泛，如果再配合内容、背景等的设置，便可以实现各种绚丽的效果。

在 CSS 中，主要是通过给图片设置 float 属性来实现文字环绕的，如下例所示：

<html>
<head>
    <title>图文混排</title>
    <style type="text/css">
    body{
        background-color:#EAECDF;     /* 页面背景颜色 */
        margin:0px;
        padding:0px;
    }
    img{
        float:right;                  /* 文字环绕图片 */
    }
    p{
        color:#000000;                 /* 文字颜色 */
        margin:0px;
        padding-top:10px;
        padding-left:5px;
        padding-right:5px;
    }
    p::first-letter{
        float:left;                  /* 首字放大 */
        font-size:60px;
        font-family:黑体;
        margin:0px;
        padding-right:5px;
    }
    </style>
</head>
<body>
        <img src="einstein.jpg" border="0">
        <p>阿尔伯特·爱因斯坦（Albert Einstein, 1879年3月14日－1955年4月18日）是出生于
        德国、拥有瑞士和美国国籍的犹太裔理论物理学家，他创立了现代物理学的两大支柱之一的相对论，也
        是质能等价公式的提出者。他在科学、哲学领域颇具影响力。因为对理论物理的贡献，特别是发现了光
        电效应的原理，他荣获1921年度的诺贝尔物理学奖（1922年颁发）。这一发现为量子理论的建立奠定
        了关键性的基础。</p>
        </body>
</html>

在上面的实例中，我们对图片使用了 float:right，使它位于页面左侧，文字对它环绕排版。此外，也对第一个“阿”字运用了 float:left，使文字环绕图片，还运用了首字放大的方法。

可以看到，图片环绕与首字放大的设置方式几乎是完全相同的，只不过对象分别是图片和文字，效果如下图所示。

图 1 文字环绕效果

如果对 img 设置 float 属性为 left，则图片将会移动至页面右侧，从而实现文字在左边环绕，如下图所示。

图 2 修改后的文字环绕效果

可以看到，这样的排版方式确实非常灵活，可以给设计师很大的创作空间。

CSS float属性实现文字环绕效果（小白必读）

相关文章