~57高度塌陷和BFC

一、高度塌陷

在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，脱离文档流，父元素的高度就会塌陷

---

二、BFC

高度塌陷会对页面布局造成影响，所以必须进行处理，可以通过开启元素BFC的方式

BFC（块级格式化环境）是css中隐含的属性，通过开启BFC可以使元素变成一个独立布局的区域

开启方式：1、设置浮动（脱离文档流后，宽度会丢失，影响布局）（float:left;）

                  2、将元素设置行内块元素（不适合做外部布局，宽度会丢失）（display:inline-block;）

                  3、将元素的overflow设置为一个非visible的值（副作用小，简便，但不完美）（overflow:hidden;）

                  4、使用after伪类（最完美，建议使用）（::after{ content:" "; display:block; clear:both; }）

---

三、特点

元素开启BFC后，会有一些特点：

1、开启BFC的元素不会被浮动元素所覆盖

2、开启BFC的元素，子元素和父元素的外边距不会重叠

3、开启BFC的元素可以包含浮动的子元素

---