Ivocin 发表于 2019-1-31 14:48:37

3.1 疑问:块级元素清除浮动例子的原理

感觉对于新手不太理解的是,上文说“正是由于块级元素具有换行的特性,因此理论上它都可以配合 clear 属性来清除浮动带来的影响” 这句话的因果关系,因为不是很清楚 clear 属性的功能,就难以理解这块将 :after 的 display 设置为块级元素,再配合 clear 属性可以清除浮动带来的影响。

Ivocin 发表于 2019-2-1 09:41:25

这个例子涉及了三个知识点:
1、文中想要讲述的块元素占一行
2、clear: both 可以将当前元素前的浮动影响清除
3、:after 会在当前元素内部最后创建该伪元素 ::after

https://ws4.sinaimg.cn/large/006tNc79ly1fzqoakgifdj30ra03874z.jpg


这样 ::after 设置为块级元素之后,由于 content 为 '',高度为 0,而设置了 clear: both (clear: left 也可以)之后,换到 float 的图片下一行,进而撑起了父元素的高度。

https://ws3.sinaimg.cn/large/006tNc79ly1fzqoecitj9j30ka0c6459.jpg

00sumbet.com 发表于 2019-3-15 14:49:17

学习了。:)
页: [1]
查看完整版本: 3.1 疑问:块级元素清除浮动例子的原理