位置：首页>> 网络编程>> 网页设计>> 关于利用:first-letter实现首字下沉的一些看法（3）

关于利用:first-letter实现首字下沉的一些看法（3）

作者：林小志　来源：林小志blog　发布时间：2010-04-20 17:19:00　

标签：fist-letter,首字下沉,css

设置浮动后并增加清除浮动属性

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那些事儿》中清除浮动章节。

在这里针对这个首字下沉说了这么多的内容，无非就是想说的是：当我们对标签元素内的内容（或者标签）设置了浮动之后，将会有可能导致该标签元素的错位，因此在设置浮动之后考虑清除浮动也是有必要的，但不是必须的；然后还有一点就是想跟一些朋友分享一个排查问题的方式，就是利用背景色来查找页面出现问题的原因。

友情提醒：打开文中所提到的demo时，请使用不同浏览器查看，并且尝试拖拉窗口，改变窗口大小看效果

投稿

猜你喜欢