html css js 基础六（清除浮动）

由于元素使用了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;}