元素的BFC属性

BFC就是Block Formatting Context的缩写

当元素开启BFC属性之后，这个元素就会变成一个独立的区域，它就不会影响到其他的元素，这样布局就不会混乱。

当元素开启BFC之后的特性

1.父元素的垂直边距不会和子元素重叠（解决父子外边距重叠问题）

    前面我们讲过父子外边距重叠的问题，当时我们就说过可以开启BFC属性

2.开启BFC的元素不会被浮动元素覆盖

3.开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）

    上篇文章有详细讲解高度塌陷问题，可以去看看。

如何开启BFC

1.设置元素浮动（不推荐）

    虽然可以撑开父元素，但会导致父元素宽度丢失，而且这种方式会导致下面元素上移，影响页面布局

2.设置display属性为inline-block（不推荐）

    可以解决高度丢失问题，但会导致宽度丢失，而且会有三像素空白

3.将元素的overflow属性设为非visible的值（推荐）

     一般用hidden属性值，会有三像素空白问题

     副作用比较小，推荐使用

4.设置元素绝对定位（不推荐）