·clearfix的原理

基本知识点：

1.div的高度由div内部的内容高度决定

2. float浮动后div脱离文档流

所以：当一个div内部嵌套的div浮动后，外部的div高度会塌陷。

解决思路：

一  。清除浮动（则塌陷高度被新的块儿元素填充）

1.可以添加一个空的div并清除浮动

缺点：增加了一个空的容器

2.可以在父容器中添加一个伪类代替div

缺点：若有多个同一名称class则会造成麻烦

3.综上，用clearfix来单独设置一个伪类

既不需要添加空容器，且不会对其他块儿元素造成影响

样式如下：

.clearfix:after{

content: '';

display: block;

clear: both;

}

二。BFC（触发BFC,使容器的外部和子元素外部重合）