DOM&BOM中,tab栏切换案例为什么要用伪元素清除浮动?

DOM&BOM中,tab栏切换案例为什么要用伪元素清除浮动?

.clearfix:after {

            content"";

            displayblock;

            height0;

            clearboth;

            visibilityhidden;

        }


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,可再次查看阅读下老师已经给出的回复,如下:

https://img1.sycdn.imooc.com//climg/619b40a1096d195312840201.jpg

1、问题:要想让本案例塌陷方法如下:content是绝对定位,高度由top决定,因此删除top,则塌陷——即content跑到ul上。解答如下:

    1)同学是想让案例中的什么元素塌陷呢?若想让ul元素塌陷,将绝对定位及.clearfix:after{}删除即可。

    2)content元素是设置了绝对定位,距离其父元素上边框的高度由top决定。删除top不是使元素塌陷,而是使得content距离其父元素上边框的距离变为了默认值0,所以删除后content会跑到ul下。

2、绝对定位也会使元素脱离文档流。

    设置了绝对定位、固定定位后均可以使用top设置元素距离参照元素上边框的距离。

祝学习愉快~

好帮手慕小脸 2021-11-19 11:19:58

同学你好,上述贴出代码在本小节的课程案例中并没有起到作用,同学可尝试将上述代码去掉后执行试一下

祝学习愉快~

  • 提问者 童真模式启动 #1

    案例不需要清除浮动,那为什么不塌陷呢?

    2021-11-19 15:25:25
  • 同学你好,因为ul中设置position:absolute,从而解决了这个塌陷问题。

    li设置浮动后,父级设置position:absolute样式,就会为这个块级元素生产一个独立的块级上下文,使这个块级元素内部的排版完全独立。独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,就是说包含块会把浮动元素的高度也计算在内,所以就不用清除浮动来撑起包含块的高度。

    祝学习愉快~

    2021-11-19 18:30:26
  • 我把ul的绝对定位删了,好像没塌陷,但是删了li中的“height:36px”content好像叠加到ul上了一点


    2021-11-20 15:03:28
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师