在实际项目中,我们经常会用到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.让父元素同样浮动。
治标不治本。