页面布局中常用的清除浮动的方法

几种清楚浮动的方法：

1、设置空标签

2、父容器设置display: inline-block

3、父容器设置overflow值auto或hidden

4、clearfix方法

例子：

Html结构是这样的：

cont1高度不固定，cols1和cols2浮动，cont2高度固定在cont1下面。

不清除浮动时的效果：

    清除浮动后的效果：

方法一：设置空标签

我们在容器cont1的最后面添加空标签clear:

    然后对clear添加css:

方法二：父容器设置display: inline-block

只需对父容器添加css属性display: inline-block; 就行了

方法三：父容器设置overflow值auto或hidden

只需对父容器添加属性overflow: auto; 或者 overflow: hidden;

方法四：clearfix方法

此时需要写一个clearfix的类：

然后在cont1里面挂载上clearfix类就可以了。

来源：oschina

链接：https://my.oschina.net/u/1586184/blog/222876