BFC

开启元素的BFC后，元素会有如下特性：

• 父元素的垂直外边距不会和子元素重叠。

• 开启BFC的元素不会被浮动的元素所覆盖。

• 开启BFC的元素可以包含浮动的子元素。

在以下情况下,会自动开启BFC:

• 设置元素浮动(此方法，虽然可以撑开父元素，但是会导致父元素的宽度丢失,也会导致下边的元素上移)

• 设置元素绝对定位

• 设置元素display:inline-block;(此方法虽然也可以解决问题,但是转为行内块也会导致宽度丢失,因此也不推荐此方法)

• 将元素的overflow设置为一个非visible的值(推荐方式:overflow:hidden;是副作用最小的开启BFC方式)