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

几种清楚浮动的方法：

一、设置空标签

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

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

四、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类就能够了。