由于元素使用了float，使得父级的高度塌陷，也就是父级的高度撑不起来。所以就需要清除浮动。 清除浮动的意思其实是清除使用浮动以后造成的影响。
清除浮动的方法：
1：给父级的元素添加高度
缺点是：扩展性不好，在不确定父级高度的情况下不能使用这种方式。
2：clear:both;（用的最多的方法）
zoom：1；用来触发IE的hasLayout，兼容IE用
.clear{ *zoom:1;} /* 兼容ie6 7 */
.clear::after{ content: '';clear:both; display: block;}
.box{border:2px solid red;}
.box div{height: 100px;width: 100px;border: 1px solid green;float: left;}
3：BFC(是一套渲染机制) （给父级加：overflow:hidden;）
触发一个元素的BFC,相当于在这个元素里建立起一道围墙，围墙里的内容和围墙外的内容不会产生干扰。
.box{border:2px solid red;overflow: hidden;}
.box div{height: 100px;width: 100px;border: 1px solid green;float: left;}
网友评论