清除浮动

清除浮动 1、问题描述： 当一个没有设置高度的容器(父元素)内有多个浮动的子元素时，

#css .parent{ width: 250px; border:1px solid #ccc; box-sizing: border-box; }

	.child1 , .child2 , .child3 {
		width: 50px;
		height: 50px;
		border:1px solid red;
		margin: 8px;
		float: left;
	} 
	.child4{
		width: 60px;
		height: 60px;
		background-color: green;
	}
	.sibling{
		width: 100px;
		height: 20px;
		background-color: gray;
	}

#html

下方（3）种情况，注释打开
复制代码 （1）这个容器没有被撑开；

（1）在这个容器内再添加其他非浮动子元素，容器被撑开了，但是这个非浮动的子元素会被浮动元素遮盖住；

（2）这个容器内都是非浮动的子元素，容器没有被撑开，再容器下面添加兄弟元素的时候，兄弟元素被浮动元素遮挡住

上面就是浮动产生的一些问题

2、清除浮动的方法 （1）给浮动元素的容器添加 overflow:hidden; 或者 overflow:auto; 的css ,父元素就会被撑开；父元素添加的兄弟元素不会被遮挡，

#css
.parent { overflow:hidden; /获取auto/ zoom:1; /在IE6中需要触发hasLayout/ } 复制代码

（2）承上，但是父元素的浮动子元素后面再添加非浮动的元素，这个非浮动的元素还是会被浮动子元素遮挡住，这时可以给这个非浮动的元素增加css样式 clear:both , 父元素会被撑开，在父元素的子元素末尾再添加其他非浮动子元素，也不会被遮挡。

#html 在