首页 > 代码库 > CSS 清除浮动的四种方法
CSS 清除浮动的四种方法
在实际项目中,我们经常会用到float属性来对页面进行布局。当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间。但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果。如果不清除浮动,会导致父元素的高度撑不开等一系列问题。
那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了。
1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)
在浮动元素的后面增加一个块元素,对块元素设置clear:both来清除两边的浮动元素,从而让父元素获得实际的高度。这个块元素可以在浮动元素的父容器上添加伪类来实现。f-clearfix加在浮动元素的父容器上。
.f-clearfix:after{content:‘‘;display:block;height:0;overflow:hidden;clear:both;visibility:hidden;}
.f-clearfix{zoom:1;}
2.对浮动元素的父容器设置高度
这种办法比较局限,通常用于父容器高度确定的情况下。
3.对浮动元素的父容器添加overflow:hidden/auto属性
overflow:hidden/auto相当于是让父级紧贴内容,包括浮动的div元素。使用时必须定义width或zoom:1,不能定义height,和position,不然超出的尺寸会被截掉。
3.让父元素同样浮动。
治标不治本。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。