清除浮动的几种方式

代码如下



	
		
		css
	
	 
	
	

没清除浮动前效果

清除浮动的几种方式_第1张图片

1 在后面加入一个div (要多渲染一个div 不推荐)
清除浮动的几种方式_第2张图片
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 标签清除浮动


以上几种方式清除浮动后效果如下图
清除浮动的几种方式_第3张图片

你可能感兴趣的:(css)