頁面佈局中經常使用的清除浮動的方法

幾種清楚浮動的方法：

一、設置空標籤

二、父容器設置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類就能夠了。