浮动产生的原因及如何消除浮动

浮动产生的原因及如何消除浮动

浮动产生的原因

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一档父容器中的盒子设置浮动，脱离标准文档流，父容器没有高度，里面的盒子就会跑到浮动的盒子下面去。

如何消除浮动

.box{
	overflow: hidden; //消除浮动的第一种
}
/* 消除浮动的第二种使用伪类，after或者before,context中添加内容时设置的三个属性可以自动清除内容 
第三种可以在浮动下面加一个空盒子设置成display:block;clear:both;*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;

	height: 0px;
	overflow: hidden;
	visibility: hidden;
/* visibility隐藏但是占位，overflow不占位 */
}