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

总结:清除浮动方法

时间:2023-03-31 13:55:05 CSS

方法一、在最后添加一个空的div标签clear:both,在浮动框下面再放一个标签。在这个标签中使用clear:both来清除浮动对页面的影响。注意:一般情况下不会用这个方法来清除浮动。因为这种清除浮动的方式会增加页面的标签,导致结构混乱。1

23
方法二、父div定义溢出:auto原理:利用溢出清除浮动的属性需要注意的是overflow属性有3个属性值:hidden、auto、visible。我们可以使用hidden和auto值来清除浮动,但是切记不要使用可见值123方法三、使用伪元素清除浮动(:after,注意:作用于浮动元素的父元素)(注:主要推荐这种方法).clearfix:after{content:"";/*设置内容为空*/clear:both;/*清除浮点数*/display:block;/*将文本转换为块级元素*/height:0;/*高度为0*/visibility:hidden;/*隐藏元素*/}.clearfix{zoom:1;/*为了兼容IE*/}end~~~如果有更好的方法欢迎留言讨论,谢谢