CSS教程:first-letter实现首字下沉
动后并未增加清除浮动的属性 
设置浮动未增加清除浮动 p:first-letter {float:left;font-weight:bold;font-size:2em;} 增加了浮动之后，我们可以看到FF/IE7/IE6中已经得到了我们所想要的效果，但是opera/safari中却出现问题了，在文本内容少的时候，第二个p标签中的文字因为浮动而跑上去了，而只有当文本出现两行的时候才会将下一个p标签的内容移开。查看demo 由此可见，清除浮动的必要性还是有的。那么我们就增加一个清除浮动的属性给p标签看看效果。 对段落首字设置浮动后并增加清除浮动的属性
设置浮动后并增加清除浮动属性 p:first-letter {float:left;font-weight:bold;font-size:2em;}p {clear:both;} p标签有了清除浮动的属性后，这个时候opera/safari也不再发神经式的把下一个p标签给拉上来了，不过仔细看看似乎间距存在着问题，难道还有其他因素导致了每个段落之间的间距消失了。查看demo 看来还是有些问题存在，是不是clear这个清除浮动的方式不对呢。难道是clear清除的仅仅只是浮动的属性而并没有让上一个p标签的高度自适应？带着疑惑，增加点背景色的代码给p标签看看是不是真的这样。 p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}
p {clear:both;background-color:#FF0000;}
利用背景色检查清除浮动后的效果 果然，p标签的高度没有下来，仅仅只是清除了浮动的属性而已，查看demo，清除浮动那么多的方式（具体可以参考《CSS那些事儿》中关于清除浮动的章节），这个clear不好使，那就换一个方式清除浮动。 p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}
p {overflow:hidden;background-color:#FF0000;}
overflow方式清除浮动 浏览器的世界就是那么神奇，一个方法不行，换一个方法就会看到世界的另一面。这个时候我们可以看到背景色扩充到了整个p标签，并且每个段落之间也存在了间距了，看来问题是解决了，查看demo。 在这里需要说的一点就是，overflow清除浮动的方式彪叔——梁璟彪不赞成使用，建议使用:after的方式清除浮动，详见《CSS那些事儿》中清除浮动章节。 在这里针对这个首字下沉说了这么多的内容，无非就是想说的是：当我们对标签元素内的内容（或者标签）设置了浮动之后，将会有可能导致该标签元素的错位，因此在设置浮动之后考虑清除浮动也是有必要的，但不是必须的；然后还有一点就是想跟一些朋 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
