CSS清除float浮动

浮动产生

一般浮动是一个盒子里面使用了CSS float浮动属性，导致父级元素对象盒子不能被撑开，浮动一般用于实现多个块级元素横向排列。

用了浮动后产生的bug

1. 背景不能显示
   父级元素由于浮动效果，会导致父级不能被撑开，所以此时父级元素里所设置的background的css效果将无法正常显示

2. margin padding 设置值不能正常显示
   由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

3. 边框不能被撑开
   由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

css清除浮动方法

1. 添加挡板元素隔断

代码片.

// css
.clearFix{
	clear:left|rigfht|both;
	zoom:1; //兼容ie浏览器
}
//html
<div class="clearFix"></div>

2. 父级div定义 overflow:hidden
   将overflow属性值设置为hidden，可以达到清除浮动的效果，但此处会有一个溢出隐藏的bug

代码片.

// css
 .container{
				overflow: hidden;
			}

			.a {
				width: 200px;
				height: 200px;
				background-color: #A47814;
				float: left;
			}

			.b {
				width: 200px;
				height: 200px;
				background-color: #EC3833;
				float: left;
			}

			.c {
				width: 200px;
				height: 200px;
				background-color: #FBD74F;
			}
 //html
 <div class="container">
			<div class="a">111</div>
			<div class="b">222</div>
		</div>
		<div class="c">333</div>

设置overflow属性之前效果：

设置overflow属性之后的效果：

3. 父元素万能清除法

代码片.

// css
   .container::after{
	 content:"";
	 display:block;
	 height:0;
	 clear:both;
	 zoom:1;
 }
//html 同上