清除浮动的三种方法

新建HTML文件 第一种清除浮动的方法是通过设置li标签的浮动来实现。当给li标签设置float属性后,下面的div元素会被拉到li标签的下方。 插入空div并使用clear属性 第二种方法是在

新建HTML文件

第一种清除浮动的方法是通过设置li标签的浮动来实现。当给li标签设置float属性后,下面的div元素会被拉到li标签的下方。

插入空div并使用clear属性

第二种方法是在ul元素的后面插入一个空的div,并给该div添加行内样式"clear:both;"。这样可以清除浮动效果,使得div元素不受浮动元素的影响。

使用CSS样式清除浮动

第三种方法是通过写一个CSS样式,并将该样式应用在需要清除浮动的div元素上。可以使用clear属性来清除浮动效果,从而使div元素正常显示。

使用after伪元素清除浮动

还有一种常用的方法是使用after伪元素来清除浮动效果。在ul元素中添加一个clearfix的CSS样式,然后在该样式中设置after伪元素的content为空,并且将display属性设置为table以及clear属性设置为both。这样可以实现清除li元素的浮动效果。

标签: