【转载】那些年我们一起清除过的浮动demo

 

闭合浮动 与 清除浮动 的区别

.main：很抱歉，现代浏览器中我没能把warp撑高(float:left)

.side：我也浮动了(float:left)

.footer：我通过设置 clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变,有些不爽

.main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)

.side：我也浮动了(float:left)

.footer：这次 warp 人品爆发了, 通过 .clearfix 已经闭合浮动了

闭合浮动的几种方法

1）添加额外标签

.main{float:left;}

.side{float:right;}

 

.footer

2）使用 br标签和其自身的 html属性

.main{float:left;}

.side{float:right;}

.footer

3)父元素设置 overflow：hidden

.main{float:left;}

.side{float:right;}

.footer

6）父元素设置display:table

.main{float:left;}

.side{float:right;}

.footer

 转自：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html