清除浮动的几种方式

代码如下

没清除浮动前效果

1 在后面加入一个div （要多渲染一个div 不推荐）

2 在父元素加个属性 overflow：hidden

.main{
	 	 border: 5px solid red;
	 	 overflow: hidden;
	 	}

3 父元素加个伪类（推荐使用这种）IE8以上和非IE浏览器才支持:after，如果想要支持IE6、7，需要给 main元素，设置样式 *zoom: 1;

.main:after{
	 		content: '';
	 		display: table;
	 		clear: both;
	 	}

4 br 标签清除浮动

以上几种方式清除浮动后效果如下图