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.让父元素同样浮动。
治标不治本。