高度塌陷问题以及BFC

高度塌陷产生的条件：

1、父元素不设高；

2、所有子元素浮动

由于子元素浮动脱离文档流，父元素高度变为0；会影响其他元素布局

解决方法；

1、给父元素添加overflow:hidden属性；（BFC原理）

2、给父元素设置高度；

3、添加一个子元素，并给其清除浮动属性，清除浮动属性只能是块元素来使用；

4、完美清除法：用伪元素选择器      父元素：：after｛content="" display:block clear:both｝

---

BFC块级格式化上下文

在页面中形成一块特殊独立渲染的区域

触发条件：

1.overflow:hideen/scroll/auto

2.float:left/right

3.display:inline-block/table-caption/table-cell/flex/inline-flex

4.position:absolution/fixed

BFC特性

1、浮动元素的高度也会被计算在内

2、BFC区域的元素不会与浮动元素发生重叠，一般会与浮动元素左右排列(应用：自适应两栏布局；BFC区域的盒子不设宽，宽度自适应补满窗口)

3、BFC区域内的元素不会影响到外面其他元素，相反也如此；

4、解决margin上下重叠的问题