css---浮动问题

浮动：当一个元素包含一个浮动元素时，该元素会自动收缩，而不是被浮动元素撑开；

浮动的实例：

当不浮动时：

浏览器中效果：

添加浮动后：

浏览器中：

可以看到添加浮动后类名为wrap的父元素高度崩塌，变为一条线。

清除浮动的方法有：

1、在浮动元素后加上一个类名为clear的空标签，并在css样式李清除浮动。（加入了一个毫无意义的空标签）

2、给父元素wrap定义高度；（但高度未知时并不适用）

3、给父元素添加样式overflow:hidden/scroll/auto。（使用hidden时可能会隐藏有用的东西）

4、给父元素类名中加上clearfix，在样式中加入。

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

.clearfix{*zoom:1}

这四种方法都可以清除浮动（都可以达到没有浮动时的效果，但都有各自的缺点与优点）

效果：