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

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

对段落首字设置浮动后并增加清除浮动的属性

 

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

 

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时,请使用不同浏览器查看,并且尝试拖拉窗口,改变窗口大小看效果

标签:fist-letter,首字下沉,css
0
投稿

猜你喜欢

  • perl中chomp的使用介绍(chop和chomp函数区别)

    2022-09-01 16:04:18
  • python简单区块链模拟详解

    2023-11-09 12:04:57
  • 深入理解python中sort()与sorted()的区别

    2021-08-17 11:46:49
  • python处理cookie详解

    2023-09-27 19:14:36
  • 在JScript中使用ADODB.Stream判断文件编码

    2008-06-08 13:03:00
  • vue设计一个倒计时秒杀的组件详解

    2024-05-09 10:41:55
  • python爬虫实战之最简单的网页爬虫教程

    2022-02-06 17:03:36
  • 吴恩达机器学习练习:神经网络(反向传播)

    2021-12-13 05:13:25
  • Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例

    2024-05-03 15:28:12
  • 在python中利用numpy求解多项式以及多项式拟合的方法

    2021-05-14 03:01:24
  • python 实现多维数组(array)排序

    2022-03-26 07:35:48
  • 如何将自己的python库打包成wheel文件并上传到pypi

    2022-03-20 06:13:40
  • 工程师必须了解的LRU缓存淘汰算法以及python实现过程

    2023-05-22 22:46:00
  • 几个MySQL高频面试题的解答

    2024-01-19 05:13:49
  • Python PyQt5模块实现一个浏览器的示例代码

    2022-02-22 04:23:47
  • 基于Python实现股票数据分析的可视化

    2021-06-04 16:11:36
  • 从零开始学YII2框架(五)快速生成代码工具 Gii 的使用

    2024-05-11 09:54:56
  • SQL语句练习实例之七 剔除不需要的记录行

    2011-11-03 16:50:51
  • 细数nn.BCELoss与nn.CrossEntropyLoss的区别

    2021-04-16 16:29:28
  • python client使用http post 到server端的代码

    2021-09-03 14:33:54
  • asp之家 网络编程 m.aspxhome.com