当前位置: 首页 > Web前端 > HTML

怎么清浮

时间:2023-04-02 19:08:08 HTML

怎么清浮什么是浮?浮动是给节点加上浮动属性,原来的设计是用来实现文字环绕的。添加float的节点脱离文档流,同时触发该节点的BFC,使节点向一个方向倾斜并排成一行。为什么要清除浮动?1、兄弟元素:两个相邻的兄弟元素,当前一个元素设置为浮动时,后一个元素会移动到前一个元素的位置,并被前一个元素挡住。所以,为了解决这个问题,我们正在清除兄弟元素的浮点数。清除浮动的兄弟元素:clear:both;

清除浮动前:清除浮动后:2.父子元素清除浮动:当父元素未设置高度,子元素开启浮动时,父元素会在高度上塌陷(高度为0)。所以,为了解决这个问题,我们要清除父元素的浮动。父元素设置高度:
没有高度塌陷时:子元素-红色,父元素-黄色父元素的高度元素未设置,出现高度塌陷问题:高度折叠:子元素-红色父子元素元素clearfloat:1.extralabel方法:在父元素上多加一个空白label,然后为这个label设置clear:borh;2、给父元素添加溢出:任意值;--可以触发BFC,实现清晰的浮动效果3.使用::after伪元素清除浮动4、使用::before和::after双伪元素clearfloat