在css中要实现首字下沉其实很简单我们只要结合float与font-size的大小即可实现首字下沉了，下面我来举几个有意思的实例。
先看个实例上代码。应用到你要沉的那个字就ok了。
例1
代码如下
复制代码
.first {
font-size:320%;/*字体百分比增大*/
float:left;/*左浮动*/
}
分析：
1.字体增大。
2.左浮动，然后下一行的就提上来了
例2
代码如下
复制代码
.menglong,.menglong2,.menglong3 {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.menglong:first-line {
color:red;
}
.menglong:first-letter {
font-size:350%;
font-weight:bold;
color:#000;
float:left;
}
.menglong2:first-line {
letter-spacing:-2px;
}
.menglong3{
text-indent:2em;
}
html代码：
代码如下
复制代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class="menglong2">首行缩进，距离更紧密的.首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的</div>
<div class="menglong3">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>
