CSS第四章：1.高度塌陷、BFC

总览

1.BFC：Block Formatting Context，块级格式化环境
2.BFC是一个隐藏的属性，如果我们为一个元素开启BFC，那么该元素会变成一个独立的布局区域
3.最典型的开启BFC的例子就是给元素设定 float浮动属性

一、BFC

1.开启BFC后的元素具有的特点：
1.1 不会被浮动的元素所覆盖
1.2 可以包含浮动的子元素

2.1 开启BFC的多种方式：
比如设置元素的浮动和将元素设置为行内块元素…但是这两种方法都有副作用：丢失width

2.2 推荐的开启BFC的方式：
将父元素的 overflow 设置为hidden，语法如下：

overflow:hidden;

2.3 显示效果：
既没有发生父元素的高度塌陷，也没有丢失父元素的width，这是一个很棒的解决办法

二、高度塌陷

1.发生场景及原因：
高度塌陷主要发生在浮动布局中，父元素的高度默认是被子元素撑开的，但是当元素被设置为 float 浮动之后，会脱离文档流。脱离文档流后，这个元素将无法撑起父元素的高度，这个时候，如果父元素没有设置一个固定的高度，就会发生高度塌陷的问题。

2.高度塌陷的后果：
父元素高度塌陷后，其下的元素会自动向上移动，这会导致整个页面的布局混乱。